html - 全宽显示子 div

Question

我有一个包含多个 span 的容器，但问题是内部容器无法全宽显示 ( jsfiddle ):

test <span class="total">45
    <span class="preview">
        <span class="upc">7 carrots</span>
        <span class="edc">14 nuts</span>
        <span class="poc">21 apples</span>
    </span>
</span>

CSS:

.total {
    position: relative;
}
.edc, .upc, .poc {
    position: absolute;
    background-color: #74BDDB;
}
.upc {
    top: -1.2em;
    left: 5px;
}
.edc {
    top: 1.7em;
    left: 5px;
}
.poc {
    top: 0.3em;
    left: 100%;
}

我尝试通过定义内部跨度 ( click ) 的绝对宽度来解决它，但它有两个缺点。首先，我有不需要的填充内容较短的跨度(“坚果”)，其次，当数字变大时我再次换行，所以使用绝对宽度不是解决方案。我能做什么？

Answer 1

将 white-space: nowrap 添加到 .edc, .upc, .poc {}。

Working Fiddle