css - 如何固定我的 Div 标签的宽度？它溢出并与我的右侧面板合并

Question

我有一个 div 标签，在那个 div 标签的旁边有 2 个 span 标签。一个 span 标签最多可容纳 10 个 span 标签，我通过编程对其进行了限制。第二个跨度将包含一个文本框和一个按钮。每当我在文本框中输入一些文本时，我都会在第一个跨度中显示它。现在我面临一些问题，无法将 span 标记移至下一行，而不是将其覆盖在正确的面板上。

谁能帮我解决这个问题..

注意:我的 div 或 span 目前还没有 CSS。

<div>
     <span>
           <span>Sample text</span>
           <span>Sample text</span>
           <span>Sample text</span>
           <span>Sample text</span>
     </span>
     <span><input type="text"><input type="button"></span>
</div>

Answer 1

span 标签用于对文档中的内联元素进行分组，因此它们本质上不是 block 级的。只需将 span 标签设置为显示为内联 block ，这应该可以解决问题。

CSS

span {
  display:inline-block;
}

---

此外，如果您要替换 span 标签，以便它们可以作为 block 元素分别保持一行，只需将它们设置为 display:block;，但如果是这样的话将它们设置为 div 而不是 span 更清晰。