Question

在此代码中，div的高度为一行高。如果第二个跨度的显示是内联块，则div的高度为两行高。

＆＃13;

<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline; background: #ff3d00;"></span>
</div>
<hr />
<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline-block; background: #ff3d00;"></span>
</div>

＆＃13;

如何才能让该节目仅显示一行高度？

Answer 1

您可以将font-size：0添加到父div，然后为子项添加所需的font-size。它是由于内联块元素之间的空间而发生的。

<div style="border:1px solid #00b0ff; width:200px; font-size:0">
        <span style="width:100%;display: inline-block;background: #00b0ff; font-size:14px;">1</span>
        <span style="display: inline-block; background: #ff3d00;"></span>
</div>

Answer 2

如果你可以使用CSS，那么你可以使用:empty伪类来隐藏空跨度。

＆＃13;

span:empty {
    display: none !important;
}

＆＃13;

<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline; background: #ff3d00;"></span>
</div>
<hr />
<div style="border:1px solid #00b0ff; width:200px;">
    <span style="width:100%;display: inline-block;background: #00b0ff">1</span>
    <span style="display: inline-block; background: #ff3d00;"></span>
</div>

＆＃13;

Answer 3

您定义了第一个<span>以获取100％父元素的宽度（style="width:100%"）。删除此项，您的<div>将为一行。

＆＃13;

<div style="border:1px solid #00b0ff; width:200px;">
        <span style="display: inline-block; background: #00b0ff">1</span>
        <span style="display: inline-block; background: #ff3d00;"></span>
    </div>

＆＃13;

为什么在这种情况下在内联，内联块之间显示不同？

3 个答案: