CSS 拉伸文本框以填充剩余空间

Question

我有一个带有标签和文本框的 div，我只是想让文本框伸展以填充页面上的剩余空间。我知道 100% 宽度不包含任何填充或边距值，因此我已将其添加到文本框和 div。我搜索了许多类似的主题，但我的文本框总是放到标签下方的新行。我错过了什么？我将我的 css 内联放置只是为了测试目的。

<div style="padding-right:10px;">
    <asp:Label ID="Label1" runat="server" Text="Label" style="float:left; width:150px; display:inline-block"></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server" style="display:inline-block; width:100%; padding-right:0"></asp:TextBox>
</div>

Answer 1

您可以将calc()+box-sizing: border-box;用于已知宽度的标签。

.container label,
.container input[type="text"] {
  float: left;
}
.container label {
  width: 150px;
}
.container input[type="text"] {
  width: calc(100% - 150px);
  box-sizing: border-box;
}

<div class="container">
  <label>Label Example</label>
  <input type="text">
</div>

或者，使用flexbox，这使得它非常容易也适用于动态宽度。

.container {
  display: flex;
  align-items: flex-start;
}
.container input[type="text"] {
  flex: 1; /*take all the available space*/
}

<div class="container">
  <label>Label Example</label>
  <input type="text">
</div>

如果您需要支持旧版浏览器，请尝试使用 CSS 表。注意，为了使它工作，我在输入框周围添加了一个 span 标签。

.container {
  display: table;
  width: 100%;
}
.container label,
.container span {
  display: table-cell;
}
.container label {
  white-space: nowrap;
}
.container span {
  width: 100%;
}
.container input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <label>Label Example</label>
  <span><input type="text"></span>
</div>