Css 固定内有表单控件的宽度标签

当相应的表单控件位于其他节点中时，有许多方法可以实现固定宽度标签：

<label for="foo">Text</label>
<input id="foo">

短
这是一个很长的标签文本
平均尺寸

取决于您实际想要的外观

我想到了使用flex

下面是一个简单的测试：

标签{
显示器：flex；
位置：相对位置；
边缘：1米；
填充：1em；
宽度：23em；
背景颜色：天蓝；
}
输入，文本区{
字体：继承；
宽度：15em；
左边距：自动；
flex：无；
框大小：边框框；
}
文本区{
高度：8em；
}

短
这是一个很长的标签文本
平均尺寸

您可以使用

显示：表格

和

显示：表格单元格

。它与所有浏览器几乎完全兼容

标签{
显示：表格；
位置：相对位置；
边缘顶部：20px；
填充：10px；
宽度：300px；
背景颜色：天蓝；
}
标签>跨度{
宽度：100px；
显示：表格单元格；
垂直对齐：顶部；
}
标签>输入，文本区域{
显示：表格单元格；
宽度：100%；
}
文本区{
高度：100px；
}

短
这是一个很长的标签文本
平均尺寸

<label>Text <input></label>