如何在不更改 HTML 的情況下水平對齊兩個元素？

在不修改標記的情況下在同一行對齊兩個元素

設計元素時，水平對齊它們可能是一個挑戰，特別是當它們的寬度時波動。考慮這樣一個場景，其中有兩個元素“element1”和“element2”，分別位於同一行且具有左浮動和右浮動。當「element2」的寬度變化，導致它與「element1」不對齊時，就會出現挑戰。

為了解決這個問題，CSS 屬性 display:inline-block 提供了一個解決方案。透過將此屬性應用於兩個元素，它們將表現為內聯元素，但定位方式類似於區塊元素。

CSS 代碼：

#element1 {
  display: inline-block;
  margin-right: 10px; /* Adjust the margin for desired spacing */
}

#element2 {
  display: inline-block;
}

標記：

<div>

透過在兩個元素上設定display: inline-block，它們將水平對齊它們之間有10px 的指定邊距。這可以確保「element2」與「element1」對齊，即使其寬度發生變化，也無需修改 HTML 結構。

以上是如何在不更改 HTML 的情況下水平對齊兩個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！