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

Question

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

这是我的代码：

 <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 没有样式时，内容不在同一行。第二行将下降。

原文由 SUN Jiangong 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Pradeep Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

浮动会把事情搞砸。通常使用浮动来工作，你也需要一个宽度。它不能使它们相互浮动，因为它不知道每个跨度相对于 div 将占用多少空间。跨度本质上是内联元素，除非您以其他方式定义它们，因此它们应该以这种方式显示而没有浮动。

原文由 jbwharris 发布，翻译遵循 CC BY-SA 2.5 许可协议