Javascript 使用css创建具有（最小）自动大小标签和灵活输入字段的表单行

我试图创建一个简单的表单行，它具有以下3个属性

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

我有以下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>

投入.年{
宽度：40px；
}
我的名字是
我出生在伦敦

失去了预期的效果

---

下面是一个例子，关于如何让我的css处理所有3个布局示例，您有什么想法吗？

此flexbox css可能满足您的所有标准：

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

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

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

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

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

---

工作得很好，比我拥有的更干净！我要做的唯一一件事就是在我想要显式设置宽度的任何输入中添加flex:none。（我将编辑您的答案以包含它）我现在看到您的编辑被拒绝。我已经添加了它。不知道，但它确实改进了答案，所以我很高兴将其包括在内。