gpt4 book ai didi

html - 表单中的 CSS Flexbox

转载 作者:太空狗 更新时间:2023-10-29 13:09:36 26 4
gpt4 key购买 nike

<分区>

我想在我的 Web 表单上使用 flex display 属性,以便并排显示两个文本字段并自动增长以填充空间。我选择在表格布局上使用 flex,因为我希望它们在窗口缩小时移动到自己的行。

我相信我误解了如何使用 flexbox。

以下是我到目前为止的工作(已简化以在此处发布)。我使用 fieldset 作为 flex parent,每个应该并排“增长”的表单元素都被封装在一个 div 中(设置为 display: inline 所以它们可以在同一行).我还有一个字段集的图例,设置为 display:blockwidth:100%,这样它就会在自己的行上。

jsFiddle link

fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
border: none;
}

label {
display: none;
}

legend {
display: block;
width: 100%;
}

fieldset > div {
display: inline;
flex: 1 1 auto;
}

input {
width: 100%;
}
<form>
<fieldset>
<legend>These are Text Fields</legend>
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</fieldset>
</form>

如您所见,每个 div 都在自己的行上(尽管有 display: inline 和 flexbox 内容)。如果给 div 元素添加边框,您会看到它们现在是 100% 宽度;但即使您手动定义宽度(例如 30%),它们也会保持在自己的行上。

如何使用 flex 并排显示 div 并允许它们缩放以填充父级的宽度?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com