如何在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">

这是小提琴：

http://jsfiddle.net/37topjh1/

Answer 1

默认情况下，水平规则是块元素，因此您需要将display的{​​{1}}属性设置为hr。您可能还希望所有内容都能很好地对齐，在这种情况下，您还需要将所有元素的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;
}

Answer 2

将display更改为inline-block：

hr {
  display: inline-block;
}

Answer 3

你应该使用inline：block;

hr {
  display: inline-block;
}