如何根据<span>元素的宽度将<span>元素彼此放置在

Question

这听起来是个非常基本和愚蠢的问题，但是我必须让此工作正常进行，因此需要在此频道上进行询问。 我在span中有要彼此相邻放置的元素，我对span元素有一个宽度。我希望该范围内的元素尊重宽度，并且当它们超出该范围时，我希望它们落到下一行。

 <div class="text">
     <span>
    eel1
    </span>
    <span>
    eel1
    </span>
    <span>
    eel1
    </span>
    <span>
    eel1
    </span>
  </div>
// these values are array of strings that I populate inside this span

这是目前的样子：

https://jsfiddle.net/gpjcutr9/2/

所以我正在寻找将其作为输出。

ele1, ele2, ele3,
ele4, ele5, ele6

因此，根据span的宽度，我希望能够在一行中显示很多元素。另外，由于这不是静态HTML，而是为这些元素动态生成的spans。

谢谢！

Answer 1

从css的跨度中删除clear: left;。也就是说，每个span元素都不应在其左侧允许浮动元素，从而导致span转到下一行。

还可以更改测试类的宽度。像素为20px时，太小而无法容纳span元素。

您的CSS应该看起来像这样：

span {
  float: left;
}
.test {
  width: 100%;
}
.spanWidth {
  width: 80px;
}