如何将<label>浮动到<input>的左侧？

Question

考虑以下HTML / CSS：

* {
    box-sizing: border-box;
}

.field {
  overflow: auto;
}
  
.field label {
  float: left;
  width: 80px;
}

.field input {
  display: block;
  width: 100%;
}

<div class="field">
  <label>Test</label>
  <input type="text">
</div>

在Firefox和Chromium上，结果最终都如下所示：

相反，我希望与<input>出现在同一行<label>。换句话说，是这样的：

为什么不float: left;使标签显示在输入的左侧？

Answer 1

通过使文本输入的宽度为100％和一个块，文本框将占据行的整个宽度，从而将文本框推到第二行。有许多方法可以做您尝试做的事情。一种方法-如果将文本输入更改为固定宽度（像素或小于100％），则应获得所需的结果。

.field label {
  float: left;
  width: 20%;
}
.field input {
  display: block;
  width: 80%;
}

更新

我看到您回答了另一个答案，您打算将输入保留100％的宽度。您可以做到这一点，而不必通过使用table / table-cell单元格css类来任意选择固定宽度。该字段必须为全角并定义为表格。必须删除浮点数，然后标签/输入为表格单元格。

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > input {
    width: 100%;
}

小提琴：http : //jsfiddle.net/1rhtgzf0/1/