css - 如何强制跨度与 div 位于同一行？

Question

我有一个简单的结构:

<div></div><span></span><span></span>

但我想将它们全部放在一条线上!此刻，它们出现了:

<div />
<span /><span />

不幸的是，我必须将第一个元素作为 div； div 充当条形图中的条形(所以圆 Angular ，宽度 = jquery 的东西，内部没有内容和 block 颜色)，下一个跨度是条形表示的值，最后一个跨度是值关联的值。

所以我想要

[____________] 25% ObjectA
[________________________] 50% ObjectB
[______] 12.5% ObjectC
[______] 12.5% ObjectD

而不是

[____________] 
25% ObjectA
[________________________] 
50% ObjectB
[______] 
12.5% ObjectC
[______] 
12.5% ObjectD

Answer 1

将 CSS 属性 display: inline-block 放在 div 上，使其像一个内联元素一样，而不是占据整行。

编辑:

@Mr_Green 建议使用 after 伪元素来清除每一行对于防止布局损坏是绝对必要的。