javascript - 如何使用 CSS 对齐一行中的元素？

Question

我有三个按钮，我想将它们排成一行，它们的间距应该相等。

例如我有这样的东西:-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

现在我想将所有按钮排成一行，间距相等，这样如果我以后添加另一个按钮，我就不用担心，每个按钮的间距都相等。

Answer 1

这会起作用。我强烈建议您阅读有关 flex 的更多信息因为这对于 CSS 样式化至关重要。

.parent {
  display: flex;
  justify-content: space-between;
}

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>