垂直堆棧按鈕

Question

我在想如何讓一些按鈕垂直堆棧，而不是在CSS水平。

因此，HTML是這樣的：

<button>Test<button> 
<button>Test<button> 
<button>Test<button> 

而且這些按鈕將通過水平默認堆棧，我要的是讓他們垂直堆疊（所以每個人的下一步按鈕的頂部）。

Answer 1

定義按鈕爲塊級元素。另外，還要注意使用正確的結束標記（</button>）：

button { 
 
    display: block; 
 
}

<button>Test</button> 
 
<button>Test</button> 
 
<button>Test</button>

Answer 2

<buttons>默認情況下是內嵌塊元素。您可以通過造型的顯示器來阻止，而不是改變：

button { 
 
    display: block; 
 
}

<button>Test</button> 
 
<button>Test</button> 
 
<button>Test</button>

Answer 3

爲此，您可以與您的css

button { 
    display: block; 
} 

Answer 4

，因爲他們已經如上所述，buttons元素皆預設inline顯示屬性。你需要做display: block;來實現你想要的結果：

p{ 
 
    font-family: arial; 
 
    font-weight: bold; 
 
} 
 
.button{ 
 
    background-color: #2a609a; 
 
\t width: 130px; 
 
\t height: 60px; 
 
    color: white; 
 
    outline: none; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.block-display button{ 
 
    margin-bottom:5px; 
 
    display:block; 
 
} 
 

 
.button:hover{ 
 
    background-color: #32CD32; 
 
    font-size: 20px; 
 
    transition: 0.5s; 
 
}

<div class="default-display"> 
 
    <p> buttons with defualt display: </p> 
 
    </br> 
 
    <button class="button">Button 1 </button> 
 
    <button class="button">Button 2 </button> 
 
    <button class="button">Button 3 </button> 
 
</div> 
 
</br> 
 
<div class="block-display"> 
 
    <p> buttons with block display: </p> 
 
    </br> 
 
    <button class="button">Button 1 </button> 
 
    <button class="button">Button 2 </button> 
 
    <button class="button">Button 3 </button> 
 
</div>