我有一個包含一些動態(tài)生成的內(nèi)容的網(wǎng)頁,在該頁面上我有一個大 div(我們將其稱為容器),其中包含其他 div(我們將稱之為這些組),每個 div(組)包含許多輸入字段。 (事先不知道有多少,但我可以將其限制為 1-10 之類的)。我需要組中的每個輸入都在同一行上,因此組中沒有換行符(如果該術語在本上下文中是正確的)。一行中可以有任意多個組,但新行上的第一個輸入始終需要是該組中的第一個輸入。目前我已經(jīng)完成了大部分工作,除了整個換行的事情。這是當前情況的圖片。正如您所看到的,組已分解,第一行的最后 3 個輸入應該已經(jīng)在下一行。有沒有辦法禁用 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;}
1 回答

HUX布斯
TA貢獻1876條經(jīng)驗 獲得超6個贊
嘗試在此處將 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;
}
- 1 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消