如何使用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 。 這是解決方案...

 .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;
}

鏈接上面的代碼

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; }