Question

我有两个hr标签，我正在尝试使它们彼此靠近，但它们相互碰撞，我该怎么办这是我的密码
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

使用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/>

Answer 4

分别在其类中为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>

试图使hr标签彼此靠近

4 个答案: