侧边栏文字溢出通常由固定宽度、不合理的 white-space 设置及错误的盒模型行为导致；本文提供一套简洁可靠的解决方案，通过移除硬编码宽度、改用 Flex 布局+合理内边距，并确保链接块级化与垂直居中，彻底解决溢出与对齐问题。
侧边栏文字溢出通常由固定宽度、不合理的 `white-space` 设置及错误的盒模型行为导致；本文提供一套简洁可靠的解决方案，通过移除硬编码宽度、改用 flex 布局+合理内边距，并确保链接块级化与垂直居中，彻底解决溢出与对齐问题。
侧边栏文字溢出（如“Contact Me”超出容器边界）的根本原因，在于你为 .sidebar 设置了 width: 10vw，同时又在 <li> 中使用了 display: inline-block 和 white-space: nowrap —— 这会强制长文本不换行、不收缩，而窄容器无法容纳，最终发生视觉溢出。更关键的是，<li> 默认是块级元素，但你将其设为 inline-block 后未设置 text-align: center 或约束其宽度，导致子元素（<a></a>）脱离父容器的宽度控制。
✅ 正确做法是放弃固定宽度 + 重构导航结构：
-
移除 sidebar 的
width：让 Flex 容器自动分配空间（.container { display: flex }已存在，只需释放 sidebar 的宽度限制）； -
将
<nav></nav>设为 Flex 纵向布局，并用gap替代手动padding，避免高度失控； -
直接使用
<a></a>标签替代<li>列表（语义更轻量，且无需处理列表项默认样式干扰）； -
为链接添加
display: block和text-align: center，确保文本水平居中且占据整行宽度； -
可选增强：添加
overflow: hidden; text-overflow: ellipsis;防止极端超长文本破坏布局（需配合white-space: nowrap和固定高度）。
以下是优化后的核心 CSS 片段（已精简冗余规则，聚焦修复逻辑）：
.sidebar {
background-color: rgb(189, 186, 186);
font-family: "Fira Sans", sans-serif;
height: 100vh;
padding: 2em; /* 统一内边距，替代 nav 内部 padding */
box-sizing: border-box; /* 确保 padding 不撑大高度 */
}
.sidebar nav {
display: flex;
flex-direction: column;
gap: 1.5rem; /* 更可控的间距 */
height: 100%; /* 配合 flex 容器，便于后续垂直居中 */
}
.sidebar nav a {
display: block;
text-align: center;
font-size: 1.25rem;
text-decoration: none;
color: inherit;
padding: 0.75rem 0;
border-radius: 6px;
transition: background-color 0.2s;
}
.sidebar nav a:hover {
background-color: rgba(0, 0, 0, 0.1);
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要对
.sidebar设置width（尤其vw单位），它会与 Flex 自动伸缩冲突； - 避免在
<li>上滥用inline-block+nowrap—— 若必须保留列表语义，请将<li>设为display: block并对<a></a>设置text-align: center； - 所有
padding/margin应作用于最外层容器或链接本身，而非中间嵌套元素（如原nav li的padding: 33px 0过大且不可维护）； - 如需响应式适配，可在小屏下用媒体查询为
.sidebar添加min-width: 180px保障可读性，而非固定10vw。
最终效果：文字严格居中、无溢出、点击区域清晰、代码更简洁可维护。布局回归语义化与弹性原则，而非依赖“调参式” margin/padding 修补。
