通过将 nav ul 设置为 display: flex，可消除因 HTML 换行符导致的 inline-block 元素间默认空白间隙，使 <li> 背景色无缝铺满整个导航条宽度。

通过将 `nav ul` 设置为 `display: flex`，可消除因 html 换行符导致的 `inline-block` 元素间默认空白间隙，使 `

` 背景色无缝铺满整个导航条宽度。

在构建水平导航菜单时，开发者常遇到一个看似细微却影响视觉一致性的难题：即使已将 margin、padding 设为 0，<li> 元素之间仍存在细小的白色（或父容器背景色）缝隙，导致红色背景无法连续铺满——这并非 CSS 属性遗漏所致，而是 HTML 源码中换行与缩进被浏览器解析为文本节点空格，而 display: inline-block 会保留这些空白字符的渲染空间。

根本解决方案：启用 Flex 布局

最简洁、语义清晰且兼容性良好的方式是将 <ul> 本身设为弹性容器：

nav ul {
  display: flex; /* 关键：消除 inline-block 空隙 */
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: rgb(237, 215, 213);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

此时，<li> 不再需要 display: inline-block（Flex 子项默认为 flex 行内行为），可简化为：

nav li {
  margin: 0;
  padding: 10px 24px; /* 建议使用左右对称 padding 提升点击区域 */
  background-color: red;
  font-size: 20px;
  line-height: 20px;
  border-right: 1px solid black;
}

nav li:last-child {
  border-right: none;
}

✅ 优势说明：

• 无需修改 HTML 结构（如删除换行、写成一行）；
• 避免使用 font-size: 0 或负 margin 等 hack 方式；
• 天然支持响应式伸缩、对齐控制（如 justify-content: space-between）；
• 语义更准确：导航列表本质是有序布局容器，Flex 正是为此设计。

额外建议

• 为 <a> 标签添加 display: block 并继承 li 的 padding，确保整个区域可点击；
• 使用 box-sizing: border-box 统一盒模型，避免边框/内边距意外撑宽；
• 若需兼容 IE10+，该方案完全可用（无需 -ms- 前缀）。

至此，红色背景将严格贴合每个导航项边界，实现真正无缝衔接的视觉效果。