垂直堆栈按钮

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>