html5 - CSS浮动问题 位置偏移了?

Question

css代码如下:

.nav{
    width: 1000px;
    height: 40px;
    background: url("../images/nav_bg.jpg") repeat-x;
    margin: 0 auto;
}


.nav .nav_left{
    float: left;
}

.nav_left li{
    list-style-type: none;
    float: left;
    width: 100px;
    line-height: 40px;
    text-align: center;
}

.nav_left a{
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-family: 微软雅黑;
}

.nav .nav_right{
    float: right;
}

html代码如下:

<p class="nav">
            <p class="nav_left">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于慕课</a></li>
                        <li><a href="#">新闻动态</a></li>
                        <li><a href="#">课程中心</a></li>
                        <li><a href="#">在线课程</a></li>
                        <li><a href="#">人才招聘</a></li>
                    </ul>
                </p>
            <p class="nav_right">
                    <input type="text">
                </p>
        </p>    

效果:

li的flot设置成了left
效果不应该是靠左么 为什么会出现在灰色条的中间呢?
求解

Answer 1

檢查這個logo區域的高度是否異常，有可能就相差幾個像素，導致logo超出了上面白色的header區域，
底下的nav >li float left的時候位置不夠就靠右了。

Answer 2

右鍵,審查下就好...
猜測是ul的預設樣式帶padding的問題

Answer 3

因為你的.nav樣式中設定的margin是 margin: 0 auto; 導致容器自動調整左右距離，預設兩邊距離一直，內容區居中顯示。還有一個地方要注意，就是瀏覽器的對ul/li的預設樣式，如chrome：

效果圖，.nav 容器已經將子節點居中了：