如何在HTML中的按钮之间放置垂直规则

我想在html中的两个按钮之间放置垂直规则。如何在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/

来源

2016-07-29 jenryb

人力资源标签不被HTML 5的支持，如果这是你希望你的书页的行唯一的地方，我建议给一个按钮中的一个较大的余量，并添加边框左/右边表示这个水平线。 – Benneb10

这不完全正确，'hr'标签确实在HTML5中受支持，但是您不能对其使用内联样式。您可以通过添加一个类并将样式应用于该类来完成与HTML4相同的任务。它在HTML5中仍然非常有效。 - https://www.w3.org/TR/html-markup/hr.html – Lee

@ Benneb10我喜欢在第二个按钮上使用border-right的想法。但是，添加边距会移动边框还是移动按钮？你介意举个例子吗？ – jenryb

变化display到inline-block：

hr { 
    display: inline-block; 
}

来源

2016-07-29 15:26:07 dNitro

-1

你应该使用内联：块;

hr { 
    display: inline-block; 
}

来源

2016-07-29 15:26:31 Pirate

默认情况下，水平规则是块元素，所以你需要将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>

来源

2016-07-29 15:39:04 Shaggy

如何在HTML中的按钮之间放置垂直规则

回答

相关问题