如何使用 CSS 将两个 Span 包装成一行

Question

我想用 CSS 将两个 span 包装在一行中。

这是我的代码：

<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 占用多少空间。 Span 本质上是内联元素，除非您以其他方式定义它们，因此它们应该以这种方式显示而无需浮动。

Answer 3

<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 4

正是左侧的浮动导致它位于不同的行上。也许可以尝试在跨度之间添加   （不间断空格）。

Answer 5

在某些情况下， display:inline 不起作用，在这种情况下，请尝试在一个父跨度中添加两个跨度，如下所示

<span>
  <span id="span1">Span 1</span>
  <span id="span2">Span 2</span>
</span>

Answer 6

也许溢出？

Answer 7

float 和 display 样式是互斥的，因此没有必要将它们一起使用。另外 默认为 display:inline; 所以这无论如何都是多余的（除非您在其他地方有其他样式将它们设置为其他样式？）。

Answer 8

You can use Table.
    
<table>
    <tbody>
        <tr>
            <td><span>Span 1 text</span></td>
            <td><span>Span 2 text</span></td>
        </tr>
        <tr>
            <td><span>Span 3 text</span></td>
            <td><span>Span 4 text</span></td>
        </tr>
    </tbody>
</table>