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

Check whether the height of the logo area is abnormal. There may be a difference of a few pixels, causing the logo to exceed the white header area above.
When the nav >li float left at the bottom is not positioned enough, it will move to the right.

Answer 2

Right click and review...
I guess it’s a problem with ul’s default style with padding

Answer 3

Because the margin set in your .nav style is margin: 0 auto;, the container automatically adjusts the left and right distances. By default, the distance between both sides is constant and the content area is displayed in the center. Another thing to note is the browser's default style for ul/li, such as chrome:

Rendering, .nav The container has centered the child nodes: