HTML中无法使用<hr>标签添加分隔线问题求助

我看了你的代码，发现几个导致

---

不显示或者不符合预期的问题，下面一步步帮你排查和修复：

一、CSS语法错误导致自定义样式的

---

失效 #

你的.yellow-line类里有两个关键错误：

• border: 10px bold red;：bold不是合法的边框样式值，正确的边框样式应该是solid、dashed、dotted这类有效值；
• position: absolute;：绝对定位会让元素脱离正常文档流，如果没设置left/right属性，它的位置可能超出可视区域或者被其他元素覆盖；另外overflow: auto对于<hr>标签来说完全没必要，它本身就是块级分隔元素。

二、修复方案 #

1. 修正自定义

---

的CSS样式 #

把.yellow-line的样式改成这样，既能保证正常显示，又能灵活控制与上方元素的间距：

.yellow-line {
  margin-top: 20px; /* 调整和上方header元素的距离 */
  border: none; /* 去掉浏览器默认的hr边框 */
  height: 10px; /* 设置分隔线的高度 */
  background-color: red; /* 设置分隔线的颜色 */
  /* 如果想用边框实现，也可以换成下面的写法 */
  /* border-top: 10px solid red; */
}

2. 调整HTML结构，确保

---

在指定

后正确显示 #

如果你想在<div class="header">之后添加分隔线，直接把<hr>放在该div的闭合标签之后即可，不需要额外嵌套div（除非有特殊布局需求）。修复后的HTML结构：

<img class="vox-logo" src="images/vox_logo.JPG" alt="Vox Logo">
<div class="header">
  <h5 class="menu-0">EXPLAINERS</h5>
  <h5 class="menu-1">POLITICS AND POLICY</h5>
  <h5 class="menu-2">WORLD</h5>
  <h5 class="menu-3">CULTURE</h5>
  <h5 class="menu-4">SCIENCE AND HEALTH</h5>
  <h5 class="menu-5">IDENTITIES</h5>
  <h5 class="menu-6">MORE</h5>
  <img class="twitter" src="images/twitter.png" alt="Twitter">
  <img class="facebook" src="images/facebook.png" alt="Facebook">
  <img class="youtube" src="images/youtube.png" alt="YouTube">
  <img class="rss" src="images/rss.png" alt="RSS">
  <img class="people" src="images/people.png" alt="People">
  <img class="search" src="images/search.png" alt="Search">
</div>
<!-- 这是header之后的默认样式分隔线 -->
<hr>
<!-- 这是自定义样式的分隔线，紧跟在header之后 -->
<hr class="yellow-line">

三、额外提示 #

• 如果你需要精细控制分隔线的位置，建议用margin/padding调整间距，尽量避免随意使用position: absolute，除非你明确知道它的定位参考元素；
• 浏览器默认的<hr>有自带样式（比如默认margin、border），如果想完全自定义，先设置border: none，再通过background-color和height来定义样式会更直观。

内容的提问来源于stack exchange，提问作者Rohan Pal