UC知道margin-top失效.各位大神帮忙看看错误在哪!
来源：百度知道 编辑：UC知道 时间：2024/06/05 20:47:35
HTML代码:
<div class="menu">
<li><img src="images/04.gif" /></li>
<li><img src="images/05.gif" /></li>
<li><img src="images/07.gif" /><a class="menulink" href="/">公告</a></li>
<li><img src="images/07.gif" /><a class="menulink" href="/">公告</a></li>
</div>
---------------------------------------------------------
CSS代码:
.menu{
height:44px;
background:url(../images/06.gif);
}
.menu li{
float:left;
}
.menulink{
background:url(../images/03.gif);
padding-right: 16px;
padding-left: 16px;
margin-bottom:20px;
}
到这里margin失效!
<div class="menu">
<li><img src="images/04.gif" /></li>
<li><img src="images/05.gif" /></li>
<li><img src="images/07.gif" /><a class="menulink" href="/">公告</a></li>
<li><img src="images/07.gif" /><a class="menulink" href="/">公告</a></li>
</div>
---------------------------------------------------------
CSS代码:
.menu{
height:44px;
background:url(../images/06.gif);
}
.menu li{
float:left;
}
.menulink{
background:url(../images/03.gif);
padding-right: 16px;
padding-left: 16px;
margin-bottom:20px;
}
到这里margin失效!
图片和文字写在同一个<LI>里 这样的话 <li>的高度会自动符合图片的高度
你的意思是不是只让文字距底部20像素 而图片不变 那样的话 不能把图片和文字写在同一个<li>里
如果让图片和文字在同一个<li>里 而想让整个<li>的内容距底部20像素 这样的话要对整个<li>定义 并且不能只定义底部的边距 还要定义顶部的边距
我帮你看了下
<html>
<head>
<style type="text/css">
.menu{
height:100px;
background:url(../images/06.gif);
}
.menu li{
float:left;
margin-bottom: 20px;
}
.menulink{
background:url(../images/03.gif);
padding-right: 16px;
padding-left: 16px;
margin-bottom:20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="menu">
<li class="menulink"><img src="images/04.gif" /></li>
<li class="menulink"><img src="images/05.gif" /></li>
<li class="menulink"><img src=&quo