最近，我被一个列表浮动困扰了好久.
内容是这样的：
Paste_Image.png
上图中的右侧是一个用无序列表ul右浮动，列表项li左浮动做出来的，你会发现列表项的标记是在右侧的，而且少了一个。
我是这样写的：
HTML中
<header>
<div>
<a href="www.baidu.com" ></a>
<ul class="rt">
<li><a href="#link1" title="">导航链接一</a></li>
<li><a href="#link2">导航链接二</a></li>
<li><a href="#link3">导航链接三</a></li>
<li><a href="#link4">导航链接四</a></li>
</ul>
</div>
</header>
css中
header{
width:1282px;
height:60px;
margin:0px auto;
background-color:#333;
}
header div{
overflow:hidden;
width:1240px;
margin:0px auto;
padding-left:17px;
}
header div ul{
overflow:hidden;
margin:0px;
padding:0px;
}
header div ul li{
float:left;
width:100px;
height:60px;
line-height:60px;
text-align:center;
margin:0px 10px 0px;
}
header div ul li>a{
color:#fff;
font-size:12px;
font-weight:500;
text-decoration:none;
}
我百思不得其解，因为如果将其单独做一个网页，显示又是正常的，最后在li的属性中加入：list style position:inside;结果就解决了，但我还是不明白其中的原因：
修改后的代码：
header div ul li{
float:left;
width:100px;
height:60px;
line-height:60px;
text-align:center;
margin:0px 10px 0px;
list-style-position:inside;
}
最终要的效果：
Paste_Image.png
