避免跨度浮动右对齐与文本（CSS）

Luke 发表于 Dev

路加

我使用的是人力车，并且有一个图形悬停/注解，其中的色板（使用a定义<span>与<div>它们都包含在其中的文本重叠）。

这是我的HTML：

<div class="detail" style="left:250px">
    <div class="item active" style="top: 200px"> 
        <span style="background-color: #30c020" class="detail_swatch"></span>
        Very very very very very long label: 67<br/>
        <span style="color:#A0A0A0">Wed, 12 Feb 2014 18:51:01 GMT</span>
    </div>
</div>

这是我的CSS：

.detail {
    position: absolute;
}
.detail .item {
    position: absolute;
    padding: 0.25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: white;
    white-space: nowrap;
}
.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}
.detail_swatch {
    display: inline-block;
    float: right;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

将detail_swatch在右上角显示正确，但会重叠very very ... long label。我已阅读过的大多数解决方案都涉及更改包含div的position语句。那不是一个选择。

有什么办法可以确保detail_swatch不会与文本重叠，而是可以扩展div它们的显示范围（水平）？

此代码在JSFiddle上可用，这里也显示了问题。

乔什·鲍威尔（Josh Powell）

您可以在中添加padding-left: 15px;，.detail .item.active {}以确保该项不会与文本重叠。然后，我.detail_swatch将定位为绝对位置，而不是float: right;使其与我添加的填充重叠。

这是更改后的CSS：

.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    padding-right: 15px;
}
.detail_swatch {
    display: inline-block;
    position: absolute;
    right: 2px;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

最后，摆弄：演示

摆弄非常长的文字：演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。