我无法在HTML中使用<hr>标记添加行

Question

​

 .yellow-line{
  position: absolute;
  top: 60px;
  overflow: auto;
  border: 10px bold red;
}

 <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>
      <br>
      <hr/>
      <div>
        <hr class="yellow-line">
      </div>

​

我不能在div后面添加一行。请检查上面给定的代码。

请帮我解决这个问题，因为我正在努力寻找解决方案。谢谢。

Answer 1

首先，你的语法是错误的。它应该是border-top: 10px solid red;，不需要给hr标签提供绝对位置和溢出自动。

试试这个：border-top: 10px solid red;

Answer 2

在你的border语法错误中，没有什么叫做bold，使用solid或任何其他选项。position不是必需的，但如果您仍然需要它的话。

请像这样指定元素的宽度。或者给它的父级position: relative，这样它就可以放在父级中。

​

 .yellow-line{
  position: absolute;
  top: 60px;
  overflow: auto;
  width: 100%;
  border: 10px solid red;
  margin-bottom: 10px;
}

 <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>
      <br>
      <hr/>
      <div style="position:relative;">
        <hr class="yellow-line">
      </div>

​