html - 响应式表单如何使文本框展开？

Question

我有一个包含标签和输入标签的 div。我希望标签的宽度恒定，而文本框会扩展到其父项中剩余的任何内容。

<div class="user">
    <label for="username">Username</label>
    <input type="text" name="USER" id="username">
</div>

目前我将两个控件都向左浮动。

.user label, .user input {
   float: left;
}

如果我将标签宽度设置为 150px，我怎样才能让文本框占用剩余空间但不落到另一行？我尝试了 width 'auto'，它似乎没有做任何事情。

Answer 1

这是一个简单的解决方案，使用 CSS calc()。我跳过了 float，因为它不是必需的，但您可以根据需要使用它。

需要注意的是，calc() 比 flex 具有更好的浏览器支持，并且可以使您的 CSS 规则更清晰。

.user label {
  display: inline-block;
  width: 150px;
}
.user input {
  width: calc(100% - 160px);
}

<div class="user">
    <label for="username">Username</label>
    <input type="text" name="USER" id="username">
</div>