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

这是第3个示例所需的额外css，其输入具有明确的宽度：

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

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

1 个答案: