如何在不使用 <hr> 标签的情况下制作水平线？答案

【问题标题】：How to make a horizontal line without using <hr> tag?如何在不使用 <hr> 标签的情况下制作水平线？
【发布时间】：2021-07-19 14:34:23
【问题描述】：

如何在不使用<hr> 标签的情况下绘制细水平线？

我试过了：

.horizontal-line{
  border-top: 1px solid #9E9E9E;
  border-bottom: 1px solid #9E9E9E;
}

虽然它有效，但我希望这条线更细。我尝试将 1px 减小到 0.5px，但是没有用。

【问题讨论】：

0.5px 和 0.25px 在我的浏览器中工作得很好。
另外，如果您希望线条更细，只需使用border-top 或border-bottom，而不是同时使用两者（如果您用作<hr>的替代品@
不使用边框？使用background-color: #9E9E9E; height: 0.5px;?
它可能取决于您的浏览器和/或设备如何部分 CSS 像素在屏幕上呈现 - 特别是在多个屏幕像素构成一个 CSS 像素的那些屏幕上。您可能会发现生成的宽度取决于缩放级别。
简写：<div style="border-bottom: 1px solid gray" ></div>

【解决方案1】：

您可以使用它，但没有太大区别。

.line {
  display: inline-block;
  width: 100%;
  border-top: 0.2px solid red;
}

hr {
  border-top: 0.2px solid red;
}

<div>
  content
</div>
<span class='line'></span>
<div>
  content
</div>
<hr>
<div>
  content
</div>

【讨论】：

【解决方案2】：

根据this css-tricks 的讨论，您可以尝试一下：

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 0.5px solid #9E9E9E;
}

&lt;div class="class-name"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

有很多方法可以做到这一点。我们不能在 CSS 中使边框的大小小于 1px，所以我尝试过这种方式。随意更改不透明度。

.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;

}

【讨论】：