问

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

张炜26_807 发布于 2022-11-02 22:25

css

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

效果:

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

3 个回答

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

效果图，.nav 容器已经将子节点居中了：

2022-11-12 01:39 回答

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

2022-11-12 01:39 回答

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

2022-11-12 01:39 回答

文竹

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

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

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