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

Answer 1

<div style="float:left;">
<span style="display:inline;"></span>
<span style="display:inline; "></span>
</div>

Answer 2

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

Answer 3

在某些情况下display:inline不起作用，在这种情况下，请尝试将两个范围都添加到一个父范围中，如下所示：

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

Answer 4

它是左边的浮动，导致它在不同的线上。也许在跨度之间尝试 （不间断的空间）。

Answer 5

溢出可能吗？

<div style="width:60px; overflow:hidden;">

Answer 6

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

Answer 7

<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中下一级的子元素，我认为这是正确的答案。

另一种可行的方法是：

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

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

7 个答案: