最近，我被一個列表浮動困擾了好久.
內(nèi)容是這樣的：

Paste_Image.png

上圖中的右側(cè)是一個用無序列表ul右浮動，列表項(xiàng)li左浮動做出來的，你會發(fā)現(xiàn)列表項(xiàng)的標(biāo)記是在右側(cè)的，而且少了一個。
我是這樣寫的：

HTML中

<header>
            <div>
                <a href="www.baidu.com" >![](images/baidulogo.png)</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ú)做一個網(wǎng)頁，顯示又是正常的，最后在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