如何用CSS将两个跨度包装成一行

Question

我想spans用CSS 包装两个一行.

这是我的代码:

<div style="width:60px;">
    <span id="span1" style="float:left; display:inline;"></span>
    <span id="span2" style="float:left; display:inline; "></span>
</div>

但它不起作用.

怎么做？

编辑:

我想使用"id",无论是使用div还是span,我只想让它们在一行中.

当我只使用span没有样式时,内容不在同一行.第二行将会下降.

Answer 1

<div style="float:left;">
    <span style="display:inline; color: red;">First Span</span>
    <span style="display:inline; color: blue;">Second Span</span>
</div>

Answer 2

<div style="float:left;">
    <span style="display:contents; color: red;">First Span</span>
    <span style="display:contents; color: blue;">Second Span</span>
</div>

'display:contents' 使容器消失，使该元素的子元素成为 DOM 中的下一个级别，我认为这是正确的答案。

另一种在 ie 上也有效的方法是：

<div style="float:left; display:flex;">
    <span style="color: red;">First Span</span>
    <span style="color: blue;">Second Span</span>
</div>

Answer 3

浮子会搞砸了.通常使用浮动工作,你也需要一个宽度.它不能相互浮动,因为它不知道每个跨度相对于div占用多少空间.Spans本质上是内联元素,除非你另外定义它们,所以它们应该只显示那种没有float的方式.