求助：导航栏元素的分隔边框无法铺满容器

问题 #

给导航栏的.navli选择器添加border-bottom:1px solid grey;后，边框不能铺满导航栏的整个宽度。

原代码 #

CSS #

#navhead {
  margin: 15 20;
}

.navul {
  list-style-type: none;
}

.navli {
  width: 100%;
  padding-top: 10;
  margin-left: -10;
  padding-bottom: 24;
}

.navbar {
  border: solid grey;
  background-color: white;
  height: 100%;
  width: 300px;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 0px;
  display: flex;
}

HTML #

<nav class="navbar">
  <div class="left">
    <header id=navhead>JS Documentation</header>
    <ul class="navul">
      <li class="navli"><a class="nav-link" href="#introduction">Introduction</a></li>
      <li class="navli"><a><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></a>
      </li>
      <li class="navli"><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java
</a></li>
      <li class="navli"><a class="nav-link" href="#Hello_World">Hello world</a></li>
      <li class="navli"><a class="nav-link" href="#Variables">Variables</a></li>
    </ul>
  </div>
</nav>

问题原因及修复步骤 #

1. 容器宽度未占满：.left容器未设置宽度，内部列表无法继承导航栏的300px宽度
2. 默认内边距干扰：<ul>标签默认带padding-left，导致列表项缩进、边框无法铺满
3. CSS属性缺失单位：margin、padding的值未加px，浏览器无法正确解析
4. 错误的负边距：.navli的margin-left: -10会让边框左偏移，但无法覆盖右侧空间

修改后的代码 #

CSS

#navhead {
  margin: 15px 20px; /* 补全单位 */
}

.navul {
  list-style-type: none;
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

.navli {
  width: 100%;
  padding-top: 10px; /* 补全单位 */
  margin-left: 0; /* 移除错误负边距 */
  padding-bottom: 24px; /* 补全单位 */
  border-bottom: 1px solid grey; /* 添加底部边框 */
  box-sizing: border-box; /* 确保padding不会撑开宽度 */
}

.navbar {
  border: solid grey;
  background-color: white;
  height: 100%;
  width: 300px;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 0px;
  display: flex;
}

.left {
  width: 100%; /* 让容器占满导航栏宽度 */
  padding: 0 20px; /* 可选：添加内边距避免内容贴边 */
}

HTML

<nav class="navbar">
  <div class="left">
    <header id="navhead">JS Documentation</header> <!-- 补全属性引号 -->
    <ul class="navul">
      <li class="navli"><a class="nav-link" href="#introduction">Introduction</a></li>
      <li class="navli"><a class="nav-link" href="#What_you_should_already_know">What you should already know</a></li> <!-- 移除多余嵌套<a>标签 -->
      <li class="navli"><a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a></li> <!-- 移除无效换行 -->
      <li class="navli"><a class="nav-link" href="#Hello_World">Hello world</a></li>
      <li class="navli"><a class="nav-link" href="#Variables">Variables</a></li>
    </ul>
  </div>
</nav>

说明 #

• box-sizing: border-box确保.navli的padding不会额外撑开宽度，边框始终贴合容器边缘
• 给.left添加内边距可让内容与导航栏边框保持合理间距，避免拥挤
• 修正了HTML中的无效标签嵌套和格式问题，保证代码规范

内容的提问来源于stack exchange，提问作者HyungJun Cho