如何强制使span与div在同一行显示？

Question

我有一个简单的结构：

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

但是我想把它们都强制放在一行上！目前，它们显示为：

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

不幸的是，我必须将第一个元素设置为div；这个div作为条形图中的一根条形(所以拥有圆角，宽度由Jquery控制，没有内容和内部块颜色)，下一个span显示该条形所代表的值，最后一个span显示该值所关联的内容。

所以我想要：

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

而不是

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

- Phish

Answer 1

将CSS属性display: inline-block应用于div，使其表现为行内元素而不是占据整行。

编辑：

使用伪元素after清除每一行是必要的，以避免布局混乱。

- Dylan MacKenzie

---

谢谢，现在我感到有些尴尬！公平地说，现在还很早。谢谢，等让我可以再打勾。 - Phish

这个有效，但有时如果第二个条形宽度较小，则它也会与第一个条形在同一行上。 - Mr_Green

@Mr_Green 这是正确的，这可能是使用 <br /> 标签的适当情况，但如果他对 HTML 没有任何控制，则可能需要基于浮动的布局。 - Dylan MacKenzie

Answer 2

Dylan的建议是可行的，但有时如果其中一个div的宽度非常小，则下一个div将与此div元素内联。请参见此示例。因此，我的建议是使用:after伪元素，它将是display:block。这个伪元素将用于每个条形部分中的最后一个span。

div {
    /* width and height are just for example */
    width: 100px;
    height: 50px;
    background-color: red;
    display: inline-block;
}
div+span+span:after {  /* last span element's pseudo element */
    content:"";
    display: block;
}

Working Fiddle

- Mr_Green

Answer 3

自 `div` 元素默认为 `display: block`，占用所有可用宽度，因此您需要将其设置为 `display: inline-block`。您还需要使用 `
` 手动换行，或在最后一个 `` 上做些花哨的东西以使其填充剩余的可用空间。

另外，可以将每一行包装在另一个块级元素（如另一个 `div`）中以创建新的行。

- Nils Kaspersson

Answer 4

在你的span中添加CSS属性：

white-space: nowrap;

- Derzu