最近减江，我被一個(gè)列表浮動(dòng)困擾了好久.
內(nèi)容是這樣的：
Paste_Image.png
上圖中的右側(cè)是一個(gè)用無(wú)序列表ul右浮動(dòng)褒链，列表項(xiàng)li左浮動(dòng)做出來(lái)的，你會(huì)發(fā)現(xiàn)列表項(xiàng)的標(biāo)記是在右側(cè)的啊终，而且少了一個(gè)镜豹。
我是這樣寫的：
HTML中
<header>
<div>
<a href="www.baidu.com" ></a>
<ul class="rt">
<li><a href="#link1" title="">導(dǎo)航鏈接一</a></li>
<li><a href="#link2">導(dǎo)航鏈接二</a></li>
<li><a href="#link3">導(dǎo)航鏈接三</a></li>
<li><a href="#link4">導(dǎo)航鏈接四</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;
}
我百思不得其解，因?yàn)槿绻麑⑵鋯为?dú)做一個(gè)網(wǎng)頁(yè)蓝牲，顯示又是正常的趟脂，最后在li的屬性中加入：list style position:inside;結(jié)果就解決了，但我還是不明白其中的原因：
修改后的代碼：
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
