4

我已经写了这个问题的jsfiddle。我希望将span填充物向下推得更远，这样它就不会掩盖它上面的填充物。目前看来，布局只考虑了内容文本的大小而忽略了填充。如果可能的话，我希望能够使用通用 css 规则来实现这一点，无论重叠跨度具有什么填充值，该规则都有效。

html:

<span class='outer'>
    <span class='inner'>
        <span class='content'>Hello</span>
    </span>
    <span class='inner'>
        <span class='content'>
            <span id='pad-me-out'>
                World
            </span>
        </span>
    </span>
</span>

CSS：

.outer > .inner{
    clear:left;
    float:left;
}

#pad-me-out{
    background: #999;
    padding:7px 14px;
}
4

2 回答 2

4

添加display: inline-block到#pad-me-out

所以;

#pad-me-out{
    background: #999;
    padding:7px 14px;
    display: inline-block;
}

按照@tomaroo 的建议更新，inline-block但这可能不适用于旧版浏览器。

于 2013-08-20T20:54:24.067 回答
0

解决方案： 在您的 css.xml 中添加以下内容。

#pad-me-out{ display:inline-block; }

逻辑/描述： Span 标签是一个内联元素，内联元素只是忽略填充，因此我们应该定义一个显示属性，它支持填充和内联壁橱是内联块。

于 2013-08-20T23:45:35.970 回答