如何让HTML/CSS水平导航栏填满页面宽度并保持同色？

核心问题 #

浏览器默认给<body>元素设置了margin: 8px，这是导致导航栏无法贴紧页面两侧的关键原因；另外原代码使用float布局，若不处理父元素的浮动塌陷问题，也可能引发布局异常。

修复方案（两种可选） #

方案1：修复原有Float布局

只需添加/修改以下样式即可解决：

/* 重置body默认边距，消除页面留白 */
body {
  margin: 0;
  padding: 0;
}

.ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  width: 100%; /* 强制导航栏占满全屏宽度 */
  overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}

/* 其余原有样式保持不变 */
.li {
  float: left;
}

.li a {
  display: block;
  color: blue;
  background-color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.li a:hover {
  background-color: #9900cc;
}

方案2：使用Flex布局（推荐，更简洁易维护）

Flex布局无需处理浮动相关问题，是现代网页布局的首选方案：

/* 重置body默认样式 */
body {
  margin: 0;
  padding: 0;
}

.ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex; /* 启用Flex布局实现菜单项水平排列 */
  width: 100%;
}

.li {
  flex: 0 0 auto; /* 保持菜单项原有宽度 */
}

/* 其余原有样式保持不变 */
.li a {
  display: block;
  color: blue;
  background-color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.li a:hover {
  background-color: #9900cc;
}

如果需要菜单项均匀分布在导航栏中，只需把.li的样式修改为：

.li {
  flex: 1; /* 每个菜单项平分导航栏可用宽度 */
}

修改完成后，导航栏会完全延伸至页面两侧，背景色覆盖全屏宽度。

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