如何在不更改 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>

此方法允许您可以将 element2 与 element1 对齐，并在它们之间保持一致的填充，而不管 element2 的动态宽度如何。

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