inline-block元素没有对齐的解决方案及总结

本文主要是介绍inline-block元素没有对齐的解决方案及总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题代码：

<div id="frame" style="margin-bottom: 50px">
    <div class="item">test</div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<style>
     .item {
        display: inline-block;
        width: 180px;
        height: 100px;
        background-color: yellow;
     }
</style>

表现如下：

解决办法(两种)：

1. 分别为.item元素设置 vertical-align: top; 或 vertical-align: middle; 或 vertical-align: bottom;

2. 分别为.item元素设置 overflow: hidden;

解决后表现如下：

问题原因

The baseline of an 'inline-table' is the baseline of the first row of the table.

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

以上解释来自于： https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

以上解释第二条翻译： 一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

我们知道，inline-block元素 vertical-align 默认值为 baseline，关于inline-block的baseline属性，网上解释的文章一大堆，解释的也比较详细，我会在文章下方给出链接。我们的布局问题代码中基线为

参考资料

• display为inline-block的元素有内容和没有内容情况下高度不一致的问题

• https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

• How to fix CSS layout problems?

• CSS深入理解vertical-align和line-height的基友关系

• CSS float浮动的深入研究、详解及拓展(一)

• CSS中vertical-align的默认值baseline的理解

• css overflow hidden increases height of container

这篇关于inline-block元素没有对齐的解决方案及总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！