为什么两个 50% 宽度的内联块元素会换行到下一行？

两个宽度为 50% 的内联块元素中断到第二行

尝试使用 display:inline-block 创建两列宽度相等的 50% 时，观察到，如果元素的总宽度超过 99%，第二列就会换行到下一行。这种行为可能看起来违反直觉。

理解问题

这种行为的原因在于 display:inline-block 与 HTML 中的空白交互的方式。空白，例如换行符、制表符和空格，会被 display:inline-block 折叠。这意味着，当内联块元素之间有空格时，它被视为单个空格，并且元素有效地彼此相邻定位。

当内联块元素的总宽度超过 100 时%，没有剩余空间来容纳空白。结果，第二列被迫换行到下一行。

解决方案：删除空格

要解决此问题，需要删除内联块元素之间的空格。这可以通过使用以下 HTML 代码来实现：

<div>

通过连接没有任何空格的 div，display:inline-block 元素可以有效地并排放置，它们之间没有任何空格。这可以确保它们在容器的宽度内正确换行。

通过此调整，两个内联块元素将保持 50% 的宽度，并且不会换行到第二行，即使它们的总宽度超过 100% .

以上是为什么两个 50% 宽度的内联块元素会换行到下一行？的详细内容。更多信息请关注PHP中文网其他相关文章！