HTML/CSS导航栏(Navbar)对齐与背景色不生效问题求助

云上老周

2026-10-2

问题解决方法

问题根因

你的ul设置为inline-flex，宽度只会自适应内部左侧几个li的宽度，没有占满整个视口宽度
最后一个li使用了position: fixed单独定位到右侧，脱离了ul的文档流，只有a标签自带黑色背景，中间空白区域自然没有背景填充
外层div因为内部ul是fixed定位脱离文档流，本身没有高度，就算给div加背景色也无法正常显示

修正方案

直接替换你的CSS代码为以下内容即可：

ul {
    position: fixed;
    top: 0;
    left: 0;
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* 占满整个视口宽度 */
    width: 100%;
    /* 给整个导航栏加统一背景色 */
    background-color: black;
}

li:last-child {
    /* 不用fixed定位，直接自动推到最右侧 */
    margin-left: auto;
}

li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    padding: 10px 11px;
    font-size: 25px;
    font-weight: bold;
    font-family: Arial;
}

li a:hover {
    background-color: gray;
}