为什么我的内联块元素没有并排对齐？-css教程-PHP中文网

为什么我的内联块元素没有并排对齐？

Patricia Arquette

发布： 2024-12-15 06:13:10

原创

554 人浏览过

Why Aren't My Inline-Block Elements Aligning Side by Side?

内联块元素无法并排对齐

考虑这样一个场景，其中两个带有 display: inline-block 的元素被分配了 50% 宽度。人们可能期望它们并排放置，但实际上它们超出了可用空间。要解决此问题：

问题的起源

内联块元素继承了它们之间的边距，尽管看起来在视觉上消除了它。这个额外的空白（通常约为 4 像素）会导致两个元素的总宽度超过 100%。

替代解决方案

减少元素宽度：减少将一个元素的宽度设置为 49% 解决了溢出问题，但引入了不良情况间隙。
浮动元素：浮动两个元素可以正确对齐它们，保持每个元素 50% 的宽度。

现代浏览器的理想解决方案（2021 年及以后） )

Flexbox 或 CSS网格布局是内联块的推荐替代方案。它们可以更好地控制间距和布局，而不会出现固有的空白问题。

内联块和空白

为了说明空白问题，请考虑以下代码：

body {
  margin: 0; /* remove default body margin */
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

登录后复制

<div class="left">foo</div>
<div class="right">bar</div>

登录后复制

虽然元素看起来相邻，但实际上它们之间的间距很窄。

以上是为什么我的内联块元素没有并排对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！