试图让 hr 标签彼此靠近答案

【问题标题】：Trying to take hr tags near each other试图让 hr 标签彼此靠近
【发布时间】：2019-01-26 10:02:02
【问题描述】：

我有两个 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;">

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

【问题讨论】：

2 有什么用？它看起来像一个所以使用一个hr...你能解释一下
你能解释一下，你想要实现什么？
不要注意这样我写对了，但网站做到了，并做到了 2
我正在尝试将两个标签放在一行中，留出一点边距
拖曳标签你的意思是hr标签或div???

标签： html css styles

【解决方案1】：

让他们display: inline-block

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/>

【讨论】：

你的意思是什么？