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

水平對齊元素而不改變標記

假設您有兩個 div，#element1 和 #element2，使用 CSS 水平定位。然而，由於#element2 中的內容變化，它與#element1 並不完美對齊。您需要一種方法來對齊它們，無論內容或瀏覽器有何差異，而無需修改 HTML 結構。

解決方案：使用內聯區塊顯示

要完成此對齊，您可以對兩個元素使用display: inline-block 屬性：

#element1 {
  display: inline-block;
  margin-right: 10px; /* Set padding between the elements */
}

#element2 {
  display: inline-block;
}

透過設定display: inline-block，元素的行為類似內聯元素但保持其區塊級屬性。這允許您水平放置它們，同時保留其原始寬度和高度。 #element1 上的 margin-right 屬性引入了元素之間所需的間距。

範例

以下範例示範了對齊方式：

<style type="text/css">
  #element1 {
    display: inline-block;
    margin-right: 10px;
  }

  #element2 {
    display: inline-block;
  }
</style>
<div>

此解有效地將#element2 與#element1 對齊，無論# element2 的變數如何，都保持一致的填滿寬度。

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