如何在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中的按鈕之間放置垂直規則

回答

相關問題