在同一行上对齐元素而不进行 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中文网其他相关文章!