Question

我有一个简单的结构：

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

但是我想强迫他们一行！此刻，他们出现了：

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

不幸的是，我必须将第一个元素作为div，我有很少的html编辑功能，因为我正在通过另一个程序进行编辑，div作为条形图中的条形图（所以圆角，宽度= jquery的东西，内部没有内容和块颜色），下一个跨度是条形代表的值，最后一个跨度是与值相关联的值。

所以我想要

[____________] 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伪元素清除每一行是绝对必要的，以防止布局损坏。

Answer 2

Dylan的建议会起作用，但有时如果div的宽度之一非常小，则下一个div将与此div元素内联。见fiddle。所以，我的建议是使用: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;
}

Working Fiddle

Answer 3

由于<div>元素默认为display: block，它占用了所有可用宽度，因此您需要将其设置为display: inline-block。您还需要使用<br>手动分隔线条，或者在最后<span>上执行某些操作以使其填充剩余的可用空间。

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

Answer 4

在您的跨度中添加CSS属性：

white-space: nowrap;

HTML＆amp; CSS - Force Div＆gt; Span＆gt; Span在同一条线上

4 个答案: