如何为导航栏（navbar）左右两侧添加更多背景区域？

你要实现导航栏延伸至页面左右两端，同时内部文本居中，原代码里的几个设置导致了问题，直接改下面这些地方就行：

原代码的问题点 #

• body 设置了 margin-left:15%，限制了页面内容的宽度，导航栏没法撑满整个视口
• nav ul 用了 display:inline-block 和 margin-left:18%，这让导航栏变成了自适应宽度的块级元素，没法占满页面
• 用 float:left 排列列表项，不利于居中控制

修改后的完整代码 #

HTML（结构无需改动） #

<div id="div1">
    <nav class="navbar">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">All Recipes</a></li>
            <li><a href="">Quick and easy</a></li>
            <li><a href="">Breakfast</a></li>
            <li><a href="">Lunch</a></li>
            <li><a href="">Dinner</a></li>
            <li><a href="">Desserts</a></li>
            <li><a href="" id="lo">Must try</a></li>
            <li><a href="">Healthy</a></li>
        </ul>
    </nav>
</div>

CSS（关键修改部分） #

/* 去掉body的左侧margin，让页面内容可以撑满视口 */
body{
    margin: 0;
}
/* 移除#div1的负margin，不需要用它来修正宽度 */
/* #div1{
    margin-left: -15%;
} */
nav ul{
    list-style: none;
    background-color: rgb(255, 197, 6);
    padding: 5px 0; /* 去掉左右padding，避免挤压内容 */
    margin: 0;
    border-top: 1px solid rgb(190, 188, 188);
    border-bottom: 1px solid rgb(190, 188, 188);
    width: 100%; /* 强制导航栏占满页面宽度 */
    display: flex; /* 用flex布局简化居中控制 */
    justify-content: center; /* 让列表项水平居中 */
    margin-top: 2%;
}
nav a{
    text-decoration: none;
    display: inline-block;
    color: black;
    text-align: center;
    padding: 5px 13px; /* 合并上下左右padding，写法更简洁 */
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
nav a:hover{
    background-color: rgb(254, 156, 0);
}
/* 去掉float:left，用flex布局自动排列列表项 */
nav li{
    /* float: left; */
}

改动说明 #

1. 移除body的margin-left:15%和#div1的负margin，让页面内容不受限制地撑满视口宽度
2. 给nav ul设置width:100%，确保导航栏背景色铺满页面左右两端
3. 用display:flex和justify-content:center替代float和inline-block，轻松实现列表项的水平居中
4. 调整padding写法，简化代码的同时避免多余的左右padding影响导航栏的满宽效果

内容的提问来源于stack exchange，提问作者daniel