Question

当相应的表单控件位于其他节点中时，有很多方法可以完成修复宽度标签：

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

然而，当表单控件里面标签时，我一直在努力寻找合理的方法：

<label>Text <input></label>

我最好的尝试意味着从页面流程中取出表单控件，从而打破具有不同高度的项目，例如：

＆＃13;

label{
  display: block;
  position: relative;
  margin: 1em;
  padding: 1em;
  width: 9em;
  background-color: azure;
}
input, textarea{
  position: absolute;
  top: 1em;
  left: 11em;
  width: 15em;
}
textarea{
  height: 8em;
}

＆＃13;

<div>
  <label>Short <textarea></textarea></label>
</div>
<div>
  <label>This is a very long label text <input></label>
</div>
<div>
  <label>Average sized <input></label>
</div>

＆＃13;

鉴于这个HTML标记，还有其他任何相当简单的CSS技术可以根据需要垂直扩展，用于标签和控制吗？

Answer 1

取决于您实际想要的外观。

想到使用flex。

这是一个简单的测试：

＆＃13;

label{
  display: flex;
  position: relative;
  margin: 1em;
  padding: 1em;
  width:23em;
  background-color: azure;
}

input, textarea{
  font:inherit;
  width: 15em;
  margin-left:auto;
  flex:none;
  box-sizing:border-box;
}

textarea{
  height: 8em;
}

＆＃13;

<div>
  <label>Short <textarea></textarea></label>
</div>

<div>
  <label>This is a very long label text <input></label>
</div>

<div>
  <label>Average sized <input></label>
</div>

＆＃13;

Answer 2

您可以使用display: table和display: table-cell。它几乎与所有浏览器兼容

label{
  display: table;
  position: relative;
  margin-top: 20px ;
  padding: 10px;
  width: 300px;
  background-color: azure;
}
label > span {
  width: 100px;
  display: table-cell;
  vertical-align: top;
}
label > input, textarea{
  display: table-cell;
  width: 100%;
}
textarea{
  height: 100px;
}

<div>
  <label><span>Short</span> <textarea></textarea></label>
</div>
<div>
  <label><span>This is a very long label text</span> <input></label>
</div>
<div>
  <label><span>Average sized </span><input></label>
</div>

用里面的表单控件修复宽度标签

2 个答案: