CSS拉伸文本框填充剩余空间 [英] CSS stretch textbox to fill remaining space

问题描述

我有一个带标签和文本框的div，我只希望文本框伸展以填充页面上的剩余空间.我知道100％的宽度不包含任何填充或边距值，因此我已将其添加到文本框和div中.我搜索了许多类似的主题，但是我的文本框始终会降到标签下方的新行.我想念什么?我将CSS内联只是为了测试.

I have a div with a label and a textbox and I simply want the textbox to stretch out to fill the remaining space on the page. I know that the 100% width doesn’t include any padding or margin values so I’ve added that to textbox and div. I’ve searched many similar topics, but my textbox always drops to a new line below the label. What am I missing? I'm placing my css inline just for testing purposes.

<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>

推荐答案

您可以使用 calc() + box-sizing:border-box; 表示已知的宽度标签.

You can use calc() + box-sizing: border-box; for known width label.

.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 ，这对于动态宽度也非常容易.

Or, use flexbox, that makes it very easy also works for dynamic width.

.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标签.

If you need to support legacy browsers, try using CSS table. Note, to make it work I added a span tag around the input box.

.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>

这篇关于CSS拉伸文本框填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！