如何让导航栏带内边距填充父级div的100%宽度？

这个问题核心是CSS盒模型的默认行为：默认情况下，元素的width仅计算内容区域的宽度，当你给导航栏（<ul>）添加左右内边距时，总宽度会变成「内容宽度 + 内边距」，从而超出父容器的范围。咱们通过以下几步修改代码就能解决：

1. 给导航栏开启border-box盒模型 #

给<ul>添加box-sizing: border-box属性，这样元素的内边距和边框都会被包含在设置的width（这里是默认的100%）之内，不会超出父容器。

2. 调整导航栏的内边距和父容器的样式 #

原来的<ul>设置了padding: 0px，我们可以保留上下内边距（让导航项更美观），同时添加左右内边距；另外父容器#wrapper的左右内边距可以移除，因为导航栏自己已经带内边距了，避免重复留白。

修改后的完整代码示例 #

body { 
  background-color: #b40404; 
} 
#wrapper { 
  margin: auto; 
  text-align: center; 
  background-color: white; 
  max-width: 750px; 
  /* 移除wrapper的左右内边距，让导航栏直接占满宽度 */
  margin-top: 30px; 
  border-radius: 10px; 
} 
ul { 
  list-style-type: none; 
  /* 调整内边距：上下留空间，左右添加内边距 */
  padding: 10px 1.5%; 
  overflow: hidden; 
  background-color: #dc4b4b; 
  border-top-right-radius: 10px; 
  border-top-left-radius: 10px; 
  /* 关键：开启border-box盒模型 */
  box-sizing: border-box; 
  /* 确保宽度占满父容器 */
  width: 100%; 
} 
li { 
  float: left; 
} 
li a { 
  display: block; 
  color: white; 
  text-align: center; 
  /* 给导航链接添加内边距，提升点击区域和美观度 */
  padding: 8px 16px; 
  text-decoration: none; 
}

额外优化建议（可选） #

如果你不想用float布局，更现代的flex布局能更轻松实现导航栏的排列，同时避免浮动带来的清除问题：

ul {
  list-style-type: none;
  padding: 10px 1.5%;
  background-color: #dc4b4b;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  /* 使用flex布局 */
  display: flex;
  gap: 8px; /* 导航项之间的间距 */
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
}

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