如何在不更改 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><p>此解决方案有效地将 #element2 与 #element1 对齐，无论 #element2 的宽度如何变化，都保持一致的填充。</p></div>

以上是如何在不更改 HTML 的情况下水平对齐两个 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！