试图将 hr 标签彼此靠近

Question

我有两个小时标签，我试图将它们彼此靠近，但它们彼此在下面，我该怎么办 这是我的代码
html<hr style="margin-right: 2%;width:70%;border-width:2px;border-color:black;border-radius:4px;">

有两个这样的HR标签，这是第二个<hr style="margin-right: 2%;width: 2%;border-width:2px;border-color:black;border-radius:4px;">

现在我应该怎么处理这些像这样彼此靠近的线

---

Answer 1

只要把它们display: inline-block

hr {
display: inline-block;
width: 30%;
}

https://codepen.io/alexmoronto/pen/aaboNj

Answer 2

您可以为两个div 提供边框底部。尽量避免 hr 标签。如果您需要该 hr 标签，请使用引导列方法。这将是论文

Answer 3

分别为其类中的big行和small行分配宽度。

.line-container {
width: 100%;
height: 4px;
}
.line {
background-color: #000;
height: 100%;
display: inline-block;
}
.big {
width: 85%;
float: left;
}
.small {
width: 10%;
float: right;
}

<div class="line-container">
<span class="line big"></span>
<span class="line small"></span>
</div>

Answer 4

使用display:flex而不是hr使用div和 风格 使用border和margin

.wrap{
display:flex
}
.line{
border-bottom:1px solid black;
width:50%;
margin:5px;
}

<div class="wrap">
<div class="line"></div>
<div class="line"></div>
</div>

或者使用display:inline-block;hr并设置width和margin

hr{
display:inline-block;
margin:5px;
width:45%;
}

<hr/>
<hr/>