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

在同一行上對齊元素而不進行HTML 更改

當元素的寬度是動態時，水平並排定位元素可能會帶來挑戰。在這種情況下，如果兩個元素在同一行上左右浮動，則會出現 element2 的可變寬度可能與 element1 不對齊的問題。

要在不修改 HTML 的情況下解決此問題，請考慮使用 display:inline-阻塞。該技術將元素定義為內聯元素，同時保持其塊狀行為。透過使用 display:inline-block 定義 element1 並將 margin-right 值設為 10px，您可以在兩個元素之間建立一致的距離。

實作：

#element1 {
  display: inline-block;
  margin-right: 10px;
}

#element2 {
  display: inline-block;
}

範例：

<div>

此方法允許您將elementelement 對齊，並在它們之間保持一致的填充，而不管element2 的動態寬度如何。

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