Question

我正在尝试在HTML中实现以下功能：

在标签元素内输入（而不是使用ID和标签）
输入应占据剩余宽度的100％

它不应该那么难，但我尝试了很多其他例子的方法;使用浮动，溢出：隐藏，限制周围元素的高度等。没有100％宽度也可以，但这不是一个选项。

我不想使用label-for（确实有效）的原因是在同一页面上会有几个相同的输入字段。它们相当复杂，所以我手动创建一个，然后用jQuery克隆它N次，如果使用ID则会破坏它。

基本出发点：

input {
  width: 100%;
}

<label>
  name:
  <input type="text" />
</label>

在这里准备了一个小提琴：https://jsfiddle.net/8uuhhcon/

Answer 1

尝试 Flexbox

label {
  display: flex;
}

input {
  flex: 1;
}

<label>name:
  <input type="text" />
</label>

Answer 2

如果您可以将 name：包装到一个或更大的范围内，例如<span>name:</span>，您可以尝试使用CSS表。

label {
  width: 100%;
  display: table;
}
span, input {
  display: table-cell;
}
span {
  width: 1%; /*give a small value*/
  white-space: nowrap; /*prevent wrapping i.e. "user name"*/
  vertical-align: middle; /*or top/bottom as needed*/
}
input {
  width: 99%; /*give a large value*/
}

<label>
  <span>name:</span>
  <input type="text" />
</label>

输入以填充标签的剩余宽度

2 个答案: