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。这是解决方案...

.parent {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.child {
  
}

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

Answer 2

.parent {
  display: flex;
}

.child {
  flex: 1;
}

Link for the above code

Answer 3

这将起作用。我强烈建议您阅读有关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>

Answer 4

.child {
  display: inline-flex;
  margin-right:1.5em;
}

如何使用CSS对齐项目？

4 个答案: