css - 如何将 float 到 <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;导致标 checkout 现在输入的左侧？

Answer 1

通过使文本输入的宽度为 100% 和一个 block ，文本框占据了整行的宽度，从而将文本框推到第二行。有很多方法可以做你正在尝试的事情。一种方法 - 如果您将文本输入更改为固定宽度(像素或小于 100%)，您应该会得到想要的结果。

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

更新

我看到您回复了另一个答案，您打算在输入中保持 100% 的宽度。您可以通过使用表格/表格单元格 css 类来完成此操作，而不是任意选择固定宽度。该字段必须是全宽的并且定义为表格。必须删除 float ，然后标签/输入为表格单元格。

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

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

.field > input {
    width: 100%;
}

fiddle :http://jsfiddle.net/1rhtgzf0/1/