如何将 <hr> 分成多个部分？ [复制]答案

【问题标题】：How to divide <hr> into multiple parts? [duplicate]如何将 <hr> 分成多个部分？ [复制]
【发布时间】：2020-11-16 14:45:39
【问题描述】：

我想实现这样的目标-

我的方法是取一个 hr 标签并将其划分并尝试自定义它。但在这样做时，我没有得到任何结果。我需要帮助以获取此逻辑，或者如果有更好的选择，请与我分享！

谢谢！！

【问题讨论】：

喜欢this、this 还是this？还是破折号的长度不同很重要？
@lucidbrot 这行不通，因为有问题的图像显示了不同长度的虚线:)
问题不在于边框...要获得与附加图像相同的结果，请使用 :after 和 :before 以及 position: absolute，并根据需要对齐它们。

标签： html css

【解决方案1】：

您可以在 hr 的顶部或底部设置 css 边框并应用破折号设置。

hr {
border-top: 4px dashed red;

<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr>


</body>
</html>

或者使用多个hr的集合作为不同宽度的内联块。

.inlineHr  {
display: inline-block;
border-top: 4px solid black;
}

.hr1 {
width:120px;
}

.hr2 {
width: 60px;
mergin-left: 10px;
}

.hr3 {
width: 20px;
mergin-left: 10px;
}

<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr class='inlineHr hr1' />
<hr class='inlineHr hr2' />
<hr class='inlineHr hr3' />

<p>Here is the following text</p>

</body>
</html>

【讨论】：

这行不通，因为有问题的图片显示了不同长度的虚线。
确实，所以我提供了第二个选项。
嘿@Pritesh - 如果那是您的反对意见，您可以根据我所做的编辑来审查您的决定吗？
在你编辑的那一刻我已经删除了我的反对票:)