Html 并排排列标签和输入的最佳方式

如果不使用表格或

显示：表格

，是否可以在输入左侧有一个灵活的标签宽度区域？出于浏览器兼容性的原因，我还希望避免网格布局。我希望css能够处理以下问题：

short_label   input_box____________________
tiny_label    input_box____________________
medium_label  input_box____________________

然后也相应地处理较大的标签：

short_label            input_box__________
medium_label           input_box__________
very_extra_long_label  input_box__________

但是我不想要：

short_label            input_box__________
tiny_label             input_box__________
medium_label           input_box__________

因此，第一列需要具有灵活的宽度，第二列需要增长以填充空间。理想情况下，我的html应该是这样的，但如果需要，可以添加“row”div。我觉得有一个灵活的答案，但可能不是，因为所有的行都需要对齐

<div class='aligned_form'>

  <label for='a'>short_label</label>
  <input type='text' id='a'>

  <label for='b'>medium_label</label>
  <input type='text' id='b'>

  <label for='c'>very_extra_long_label</label>
  <input type='text' id='c'>

</div>

短标签
中号标签
非常长的标签

对齐项目：拉伸

Flexbox具有一个通常称为“等高列”的功能。此功能使同一容器中的flex项目高度相等

此功能来自两个初始设置：

• flex-direction:行

• 对齐项目：拉伸

稍加修改，此功能就可以变成“等宽行”

• flex-direction:column

• 对齐项目：拉伸

现在，一列flex项将具有最长项的宽度

参考：

---

对齐内容：拉伸

flex容器上的初始设置是

align content:extrach

。此设置将在容器的整个长度上分布行或列（取决于伸缩方向）

在这种情况下，为了将两列打包到容器的开头，我们需要使用

align content:flex start

覆盖默认值

参考资料：

---

flex-direction:column

，

flex-wrap:wrap

和

height

因为您有一个首选的HTML结构（所有表单元素在一个容器中按逻辑顺序排列），所以flex项需要包装以形成一列标签和一列输入

因此，我们需要用

wrap

覆盖

flex-wrap:nowrap

（默认值）

此外，容器必须有固定的高度，以便物品知道包装的位置

参考资料：

---

order

属性 需要使用

order

属性跨列正确对齐标签和输入

参考：

---

.aligned\u表单{
显示器：flex；
柔性流：柱包裹；
调整内容：灵活启动；
高度：75px；
}
标签[for='a']{顺序：-3；}
标签[for='b']{顺序：-2；}
标签[for='c']{顺序：-1；}
标签，输入{
高度：25px；
填充物：5px；
框大小：边框框；
}

短标签
中号标签
非常长的标签

我认为@Michael\u B的解决方案很棒，但是另一种方法是创建一个包含2列的flex行，然后使每一列都成为flex列。只需在

标签/输入上设置一个高度，使其一致，然后调整边距



标签，输入{
高度：25px；
边缘：0.5em；
}
标签{
右边距：.5em；
}
短标签
中号标签
非常长的标签
我知道您说过您不想要CSS网格布局，但出于文档目的，我将在这里添加它。我认为，如果您不介意支持问题，这是最干净的解决方案

通过将
1fr
替换为像素或其他值，始终可以为输入设置固定宽度。另外，
align self
将标签和输入垂直居中，如果您喜欢底部对齐，请将
center
更改为
end
。
这也保持了HTML的超级干净


.container{
显示：网格；
栅隙：10px；
网格模板列：[标签]自动[输入]1fr；
}
输入{
网格列：输入；
自对准：居中；
}
标签{
网格列：标签；
自对准：居中；
}

短标签
中号标签
非常长的标签
根据文档（），您应该使用网格进行此操作。什么浏览器兼容性问题阻止您使用网格，但仍然允许使用Bootstrap v4？对于我的需要，Bootstrap网格太严格了。我需要第一列具有灵活的宽度。我不能只说第三列和第九列。我的意思是我不想为了浏览器兼容性而使用display:grid。如果有一个引导网格解决方案，我愿意接受。为什么不使用一个表呢？很明显，您正在寻找表的行为，因此我不会称之为坏做法。谢谢@Michael_B。您的第一个解决方案是无法维护的，因为它手动设置容器的高度，并且每次添加或删除输入时都必须更改。然而，您的第二个解决方案工作得很好。我不喜欢将标签从输入中分离出来的想法，但它会起作用。答案被接受。