元素浮动后对无序列表li的影响（困扰）

最近，我被一个列表浮动困扰了好久.
内容是这样的：

Paste_Image.png

上图中的右侧是一个用无序列表ul右浮动，列表项li左浮动做出来的，你会发现列表项的标记是在右侧的，而且少了一个。
我是这样写的：

HTML中

<header>
            <div>
                <a href="www.baidu.com" >![](images/baidulogo.png)</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