CSS columns auto break问题求助：导航布局无法实现预期效果

Hey there! 先给你点个大大的赞——自学前端还能卡三天不放弃，这份劲头太值得肯定了！我来帮你捋捋代码里的问题，争取帮你搞定这个布局~

先明确你的现状和目标：

• 红色：当前代码实现的效果
• 蓝色：你想要达到的效果

问题截图：呈现了当前实现效果与期望效果的视觉对比

先看看你的CSS代码：

#container { width: 100%; margin: 0 auto; overflow: hidden; position: relative; } 
#sidebar-left, #sidebar-right { width: 20%px; float: left; margin-right: auto; margin-left: auto; } 
#navbar-center { width: 56%; height: 40px; float: left; margin-left: 40px; display: block; } 
#sidebar-left ul, #sidebar-right ul, #navbar-center ul { list-style-type: none; text-align: auto; } 
#sidebar-left li, #sidebar-right li, #navbar-center li { display: block; color: #666; width: 100px; height: 40px; line-height: 40px; } 
#sidebar-left a:hover, #sidebar-right a:hover, #navbar-center a:hover { color: #FFF; background-color: #666; } 
.wrap-title { font-size: 18px; font-weight: 800; line-height: 25px; overflow: hidden; height: 24px; padding-bottom: 4px; border-bottom: 2px solid #666; } 

代码里的核心问题解析： #

1. 单位错误：width: 20%px; 同时混用百分比和像素单位，属于无效写法，浏览器无法识别，会直接导致侧边栏宽度异常。
2. 无效属性值：text-align: auto; CSS里text-align没有auto这个有效值，得换成left/center/right这类符合需求的取值。
3. 布局溢出问题：侧边栏各占20%+中间navbar占56%，再加上margin-left:40px，总宽度会超过容器的100%，大概率会导致布局错乱（比如侧边栏被挤到换行）。
4. 浮动元素居中无效：margin-right: auto; margin-left: auto; 对浮动元素不生效，因为浮动元素脱离了常规文档流，这种居中方式只对非浮动的块级元素有用。

修改后的代码参考： #

#container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#sidebar-left, #sidebar-right {
  width: 20%; /* 修正单位错误 */
  float: left;
}

#navbar-center {
  width: calc(60% - 80px); /* 用calc计算宽度，减去左右margin总和，避免溢出 */
  height: 40px;
  float: left;
  margin: 0 40px; /* 统一设置左右margin，替代单边margin */
  display: block;
}

#sidebar-left ul, #sidebar-right ul, #navbar-center ul {
  list-style-type: none;
  padding: 0; /* 清除ul默认内边距 */
  margin: 0; /* 清除ul默认外边距 */
  text-align: center; /* 设置文本居中，可根据需求调整为left/right */
}

#sidebar-left li, #sidebar-right li, #navbar-center li {
  display: block;
  color: #666;
  width: 100%; /* 让li宽度适配父容器，避免固定宽度限制布局 */
  height: 40px;
  line-height: 40px;
}

#sidebar-left a:hover, #sidebar-right a:hover, #navbar-center a:hover {
  color: #FFF;
  background-color: #666;
  display: block; /* 让hover效果铺满整个li区域 */
}

.wrap-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 25px;
  overflow: hidden;
  height: 24px;
  padding-bottom: 4px;
  border-bottom: 2px solid #666;
}

额外说明： #

如果你的蓝色目标效果还有其他细节（比如navbar的背景色、文字样式、li横向排列等），可以再补充描述，我再帮你调整~ 自学前端难免遇到卡壳的时候，慢慢来，你已经很棒了！

内容的提问来源于stack exchange，提问作者Try My Best