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

我有一个div标签，在div标签的旁边有两个span标签。 一个span标记最多可以容纳10个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>

---

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

CSS

---

此外，如果要替换跨度标记，以便它们可以像块元素那样分别保留一行，只需将它们设置为显示：block；，但是如果是这样的话，只将它们设置为div而不是span会更干净。

请给我们发一些示例代码，这会使调试更容易！尝试使用一些css，比如float:left/right；清洁：两者皆有；对于包含示例文本的内部跨距，请尝试向其添加float:left和display:block css属性。

span {
  display:inline-block;
}