如何在不更改 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><p>通过在两个元素上设置 display:inline-block ，它们将水平对齐，并在它们之间指定 10px 的边距。这可以确保“element2”与“element1”对齐，即使其宽度发生变化，也无需修改 HTML 结构。</p></div>

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