html - 避免 span float 与文本右重叠 (CSS)

Question

我正在使用人力车并有一个图表悬停/注释，其中颜色样本(使用 <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 的位置语句。那不是一个选择。

有什么方法可以确保 detail_swatch不与文本重叠，而是展开 div它们包含在(水平)？

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

Answer 1

您可以在 .detail .item.active {} 中添加一个 padding-left: 15px; 以确保该元素不会被文本重叠。然后我将 .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;
}

最后，一个 fiddle :Demo

摆弄非常非常长的文本:Demo