为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

红糖糍粑 2023-12-19 16:20:02
我有一个包含一些动态生成的内容的网页,在该页面上我有一个大 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;}
查看完整描述

1 回答

?
HUX布斯

TA贡献1876条经验 获得超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;

}


查看完整回答
反对 回复 2023-12-19
  • 1 回答
  • 0 关注
  • 44 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信