当我们在一个div里面包含头、中(ul和li)、尾i的话,如果设置每一个li的margin属性的话,那么虽然每个li都有距离了,但是整体的间距是不和谐的,这里需要设置ul的margin属性,代码如下:
<div class="contain">
<div class="head"></div>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="foot"></div>
</div>
CSS样式:
.contain
{
78px;
border: 1px solid red;
}
.contain .head
{
78px;
height: 12px;
background-color: Orange;
}
.contain .main
{
78px;
}
.contain .main ul
{
margin: 0;
padding: 0; /*ff*/
margin-bottom: 10px; /*离下面的距离*/
}
.contain .main ul li
{
39px;
height: 35px;
margin: 0 auto;
margin-top: 10px; /*离顶部的距离*/
list-style-type: none;
border: 1px solid red;
}
.contain .foot
{
78px;
height: 12px;
background-color: Orange;
}