13

我有一个简单的结构：

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

但我想将它们全部集中在一条线上！此刻，它们出现了：

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

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

所以我想要

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

并不是

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

4 回答 4

20

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

编辑：

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

于 2013-09-26T08:47:54.357 回答
7

Dylan 的建议会起作用，但有时如果其中一个 div 的宽度非常小，那么下一个 div 将与这个 div 元素内联。看到这个小提琴。所以，我的建议是使用:after伪元素，即display: block. 此伪元素将用于每个条形部分的最后一个跨度。

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;
}

工作小提琴

于 2013-09-26T09:06:01.910 回答
3

由于<div>元素默认为display: block，占用了所有可用宽度，因此您需要将其设置为display: inline-block. 您还需要使用 手动换行<br>，或者在最后一个上做一些花哨的事情<span>以使其填充剩余的可用空间。

或者，将每一行包装在另一个块级元素（例如 another <div>）中以创建新行。

于 2013-09-26T08:52:55.633 回答
-1

在您的跨度添加 CSS 属性：

white-space: nowrap;
于 2019-12-19T13:42:39.680 回答