如何让导航菜单实现全屏宽度？需修改哪些代码？

刚接触HTML/CSS不用慌，你的代码只需要几个小调整就能实现全屏导航，我一步步给你拆解：

核心修改要点 #

• 消除页面默认的边距，避免导航两侧留空白
• 让导航的父容器占满整个屏幕宽度
• 用更适合全屏布局的Flex代替原来的Float来排列一级菜单项

修改后的完整CSS代码 #

我已经把需要改的地方标注出来了，你可以直接替换原来的CSS：

/* 新增：重置body默认边距，消除页面两侧空白 */
body {
  margin: 0;
  padding: 0;
}

/* 新增：让导航父容器占满全屏宽度，背景和菜单保持一致 */
#main-navigation {
  width: 100%;
  background: #1bc2a2;
}

ul {
 list-style: none;
 padding: 0;
 margin: 0;
 background: #1bc2a2;
 /* 修改：添加Flex布局，让一级菜单项自动排列 */
 display: flex;
 width: 100%;
}

ul li {
 display: block;
 position: relative;
 /* 修改：去掉原来的float，用Flex来控制排列 */
 /* float: left; */
 background: #1bc2a2;
 /* 可选：如果想让所有一级菜单项宽度完全一致，加上这行 */
 /* flex: 1; */
}

/*The CSS to hide the sub menus.*/
li ul {
 display:none;
 /* 新增：子菜单取消Flex，恢复垂直布局，宽度自适应内容 */
 flex-direction: column;
 width: auto;
}

ul li a {
 display: block;
 padding: 1em;
 text-decoration: none;
 white-space: nowrap;
 color: #fff;
 /* 可选：让菜单项文字居中，视觉更美观 */
 text-align: center;
}

ul li a:hover {
 background: #2c3e50;
}

/*Displays the dropdown menu on hover.*/
li:hover > ul {
 display: block;
 position: absolute;
}

li:hover li {
 float: none;
}

li:hover a {
 background: #1bc2a2;
}

li:hover li a:hover {
 background: #2c3e50;
}

.main.navigation li ul li {
 border-top: 0;
}

/*Displays second level dropdown menus to the right of the first level dropdown menu. */
ul ul ul {
 left: 100%;
 top: 0;
}

关键修改的原因 #

1. 重置body样式：浏览器默认会给body添加8px左右的margin，这会导致导航两侧出现空隙，所以先把它清零。
2. 设置#main-navigation宽度：确保导航的容器占满整个屏幕宽度，避免菜单内容被限制在局部区域。
3. Flex布局替代Float：Float布局在全屏适配时容易出现对齐、换行等问题，Flex布局可以让一级菜单项自动分配空间，如果你想让所有一级菜单项宽度完全相同，只需要给ul li加上flex:1即可，非常灵活。
4. 子菜单调整：子菜单是下拉展示的，不需要横向排列，所以要取消它们的Flex布局，恢复垂直排列的默认样式，同时设置宽度自适应内容，避免子菜单也占满全屏。

HTML部分不需要做任何修改，保持你原来的代码就可以了。

内容的提问来源于stack exchange，提问作者Zoltán Fodor