我无法改变按钮的大小，我希望它们水平堆叠 - 而不是垂直堆叠

Question

目前我无法控制我的按钮，我希望我的按钮水平堆叠，宽度为30％的#user-buttons。我在论坛上看到解决方案是将Display：inside-block。但它没有用。关于我应该如何继续的任何建议？

#user-buttons {
  width: 100%;
  border: 1px solid;
  text-align: center;
  background-color: red;
}
.button {
  font-size: 10px;
  font-weight: bold;
  width: 30%;
}

<div id="user-buttons" class="controls">
  <input type="button" class="button" value="Hi">
  <input type="button" class="button" value="Bye">
  <input type="button" class="button" value="Maybe">
</div>

Answer 1

容器按钮需要具有流体宽度width:100%，因此它会溢出容器宽度。

代码：

div.controls input
{
    width: 100%;
}

这是固定的Example。