html - 如何在 HTML 中的按钮之间放置垂直线

Question

我想在 html 中的两个按钮之间放置一条垂直线。

它应该将按钮分开，但它会将按钮向下移动。

这个

变成这样:

 <button type="button" class="btn btn-default" >button</button>
 <button type="button" class="btn btn-default" style="margin-right: 100px">button </button>
  <button type="button" class="btn btn-primary" >separate button</button>

对于水平线:<hr width="1" size="500">

这是 fiddle :

http://jsfiddle.net/37topjh1/

Answer 1

默认情况下，水平线是 block 元素，因此您需要将 hr 的 display 属性设置为 inline-block。您可能还希望一切都很好地对齐，在这种情况下，您还需要将所有元素的 vertical-align 属性设置为 middle。

button,hr{
  vertical-align:middle;
}
button:nth-of-type(2){margin-right:100px;}
hr{
  background:#000;
  border:0;
  color:#000;
  display:inline-block;
  height:40px;
  width:1px;
}

<button>button</button>
<button>button</button>
<hr>
<button>separate button</button>