0

我有这个 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）。

4

4 回答 4

2

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

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

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

于 2012-09-12T15:47:03.260 回答
2

如果您浮动跨度，它们将并排移动。这里有一个例子。

   <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>
于 2012-09-12T15:47:07.873 回答
0

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

于 2012-09-12T15:53:00.973 回答
0

就像 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>
于 2012-09-12T17:03:36.940 回答