Question

我有这个HTML片段：

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="display: inline-block; background-color: red; width: 10px; height: 20px;"></span>
    <span style="display: inline-block; background-color: green; width: 10px; height: 20px; "></span>
</div>

我的目标是并排覆盖外部<div>两个跨度，但相反，一个跨度位于另一个跨度的顶部。

如何制作，所以红色SPAN位于左侧，右侧SPAN位于右侧？（注意，我希望解决方案能够支持2个以上的内部SPAN）。

Answer 1

因为跨度为inline-block，所以它们之间的空格将显示为空格，并且其中一个将被推到下方，因为div的宽度不考虑该额外空间。尝试使用注释删除跨距之间的空白（或将它们放在同一行上）。

<div style="display: inline-block; width: 20px; height: 20px; background-color: silver">
    <span style="..."></span><!--
    --><span style="..."></span>
</div>

我还建议使用样式表来设置元素的样式，而不是使用内联CSS。这将使您的代码更具可读性。

Answer 2

如果你漂浮跨度，他们将并排。示例here。

   <div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
    </div>

Answer 3

威廉对你的问题进行评估是正确的。我发现将font-size: 0添加到父元素（在您的情况下是封闭的div）可以解决问题。

Answer 4

像scrappedcola说的那样，它可以通过漂浮内部元素来修复，但每当你浮动的东西应该是清晰的，所以它可以是这样的： -

<div style=" width: 20px; height: 20px; background-color: silver">
        <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
        <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
        <div style="clear: both;"></div>
    </div>

这里额外的div是一个用于清除浮动元素的伪元素

另一种方法是在父div上使用clearfix类

clearfi类的CSS是

.clearfix:after {clear:both;content:".";display:block;height:0;visibility:hidden;}

，您的代码应如下所示： -

<div class="clearfix" style=" width: 20px; height: 20px; background-color: silver">
            <span style="display: inline-block; float:left;background-color: red; width: 10px; height: 20px;"></span>
            <span style="display: inline-block; float:left;background-color: green; width: 10px; height: 20px; "></span>
        </div>

覆盖2个跨度的div

4 个答案: