本文教你通过设置 width: max-content 解决导航栏 元素超出内容宽度、导致背景色向右延伸的常见布局问题，配合 Flex 布局优化，实现精准贴合文本宽度的纯色导航栏。
本文教你通过设置 `width: max-content` 解决导航栏 `
- ` 元素超出内容宽度、导致背景色向右延伸的常见布局问题，配合 flex 布局优化，实现精准贴合文本宽度的纯色导航栏。
在初学 CSS 布局时，一个典型误区是认为只要清除了 margin 和 padding，容器就会“紧紧包裹”其内容——但事实并非如此。默认情况下，块级元素（如 <ul></ul>）会自动撑满父容器宽度（100%），即使内部仅包含几项导航文字。因此，当你为 .navBar ul 设置深色背景（如 hsl(0, 0%, 25%)），该背景会从左边缘一直延伸到右边缘，造成图中所示的“多余黑空间”。
根本原因在于：.navBar ul 是块级元素，未显式限制宽度，而 display: flex 仅控制子项排列方式，并不改变自身的宽度行为。
✅ 正确解法是显式声明其宽度适配内容：
.navBar ul {
list-style-type: none;
background-color: hsl(0, 0%, 25%);
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: flex-start;
width: max-content; /* ? 关键：宽度收缩至所有子项总宽度 */
}width: max-content 表示元素宽度等于其内部内容在不换行前提下所需的最大固有宽度（即所有 <li> 并排时的总宽度）。这样背景色就只覆盖实际有内容的区域，右侧空白自然消失。
⚠️ 注意事项：
- 避免同时使用
float: left（如原代码中.navBar li { float: left; }）与display: flex—— 二者冲突，float在 Flex 容器中无效，应直接删除； - 若需响应式支持，
max-content在所有现代浏览器中均受支持（Chrome 69+、Firefox 63+、Safari 14.1+），旧版可降级为width: fit-content或包裹一层内联容器； - 确保父容器
.navBar本身无额外padding或border，否则仍可能引入视觉偏移。
最终效果：导航栏背景严格贴合文字区域，清爽无冗余，为后续添加悬停动效或响应式断点打下坚实基础。
