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>是内联块元素。您可以通过将显示样式设置为阻止来改变它：

＆＃13;

button {
  display: block;
}

＆＃13;

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

＆＃13;

Answer 3

如上所述，buttons元素默认带有inline显示属性。你需要让display: block;来达到你想要的结果：

p{
  font-family: arial;
  font-weight: bold;
}
.button{
  background-color: #2a609a;
	width: 130px;
	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>

Answer 4

您可以使用css

执行此操作

button {
    display: block;
}

垂直堆叠按钮

4 个答案: