CSS 不允许将 div 元素破坏到新行

Question

我有一个包含一些动态生成的内容的网页，在该页面上我有一个大 div（我们将其称为容器），其中包含其他 div（我们将称之为这些组），每个 div（组）包含许多输入字段。 （事先不知道有多少，但我可以将其限制为 1-10 之类的）。我需要组中的每个输入都在同一行上，因此组中没有换行符（如果该术语在本上下文中是正确的）。一行中可以有任意多个组，但新行上的第一个输入始终需要是该组中的第一个输入。目前我已经完成了大部分工作，除了整个换行的事情。这是当前情况的图片。正如您所看到的，组已分解，第一行的最后 3 个输入应该已经在下一行。有没有办法禁用 div 中所有元素的换行行为，同时保持分解多个 div 的能力？以下是 codepen 上的示例。这是我到目前为止的CSS：.number-fields input {    width: 1cm;    text-align: center;}.number-fields-input {    margin: 5px;}* {    background-color: #2F363F;}.form-control {    color: lightcyan;    display: inline;    background-color: #2F363F;}#number-fields {    padding-right: 5vh;    width: 100%;}.input_group {    display: inline;    padding-right: 5vh;}

Answer 1

尝试在此处将 Flexbox 与 flex-wrap 结合使用：wrap 在容器上并使用 flex-wrap： nowrap 输入组。

.container {

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-start;

}

.input-group {

    display:flex;

    flex-wrap:nowrap;

    justify-content:flex-start;

}