javascript - 使用 css 创建具有(最小)自动大小标签和灵活输入字段的表单行

Question

我正在尝试创建一个具有以下 3 个属性的简单表单行。

• 允许在一行中使用多个标签和输入
• 标签会自动调整大小以适合其文本
• 输入 flex 以填充剩余空间

我有以下 CSS:

.fill-field {
    display: table;
    width: 100%;
}
.fill-field label {
    display: table-cell;
    width: 1%;
    padding: 5px;
    white-space: nowrap;
}
.fill-field input {
    display: table-cell;
    width: 100%;
    box-sizing: border-box;
}

它在以下 html 上运行良好:

<div class="fill-field">
    <label>My name is</label><input placeholder="name"/>
    <label>I live in</label><input placeholder="city"/>
</div>

但是由于某些原因，如果我的输入没有标签

<div class="fill-field">
    <label>My name is</label><input placeholder="name"/>
    <label>I live in</label><input placeholder="city"/>
    <input placeholder="state"/>
</div>

或者我尝试专门给输入一个宽度:

<style>
    input.year {
        width: 40px;
    }
</style>
<div class="fill-field">
    <label>My name is</label><input placeholder="name"/>
    <label>I was born in</label><input class="year" placeholder="year"/>
</div>

失去了预期的效果。

这是一个JSFiddle ，关于如何使我的 css 处理所有 3 个布局示例的任何想法？

Answer 1

这个 flexbox CSS 可能满足您的所有条件:

.fill-field {
  display: flex;
  flex-direction: row;
}

.fill-field label {
  padding: 5px;
}

.fill-field input {
  flex: 1;
  box-sizing: border-box;
}

Fiddle

这是第三个示例所需的额外 css，该示例具有显式宽度的输入:

input.year {
  width: 40px;
  flex: none;
}