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

Question

目前我无法控制我的按钮，我希望我的按钮水平堆叠，宽度为 #user-buttons 的 30%。我在论坛上看到解决方案是将 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 .