CSS浮动问题 位置偏移了?

发布于 09-04 02:08 字数 1467 浏览 29 评论 0

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代码如下:

<div class="nav">
            <div 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>
                </div>
            <div class="nav_right">
                    <input type="text">
                </div>
        </div>    

效果:
图片描述

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

是伱的2022-09-11 02:08:41

图片描述

检查这个logo区域的高度是否异常,有可能就相差几个像素,导致logo超出了上面白色的header区域,
底下的nav >li float left的时候位置不够就靠右了。

叶落知秋2022-09-11 02:08:41

右键,审查下就好...
猜测是ul的默认样式带padding的问题

因为你的.nav样式中设置的margin是 margin: 0 auto; 导致容器自动调整左右距离,默认两边距离一直,内容区居中显示。还有一个地方需要注意,就是浏览器的对ul/li的默认样式,如chrome:
图片描述

效果图,.nav 容器已经将子节点居中了:
图片描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文