如何根据 <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

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

还要更改测试类的宽度。在 20px 时，它太小而无法容纳 span 元素。

你的 css 应该是这样的：

span {

  float: left;

}

.test {

  width: 100%;

}

.spanWidth {

  width: 80px;

}