CSS使文本框填充所有可用宽度

Question

我的网页中有以下“行”

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

我实际上无法控制 DropDown 控件的宽度，因为它的大小适合最长的选项值。按钮是固定宽度的。如何让 TextBox 填充所有可用的剩余宽度？

我试着把它放在一个表格中，但遇到了同样的问题，即如何使所有其他列尽可能小以适应它们的内容，然后 TextBox 列填充剩余宽度？

如果有必要，Hacky 解决方案很好，我很久以前就放弃了任何假装甚至关心 CSS 标准，因为做最简单的事情是如此困难。

编辑:澄清一下，我所说的 TextBox 是指 <input type="text"/>

Answer 1

2018 年更新的答案

刚遇到这个老问题，现在有一种更简单、更清晰的方法可以通过使用 CSS Flexible Box Layout Model 来实现。现在所有主流浏览器都支持它。

.flex-container {
  display: flex;
}

.fill-width {
  flex: 1;
}

<div class="flex-container">
	<label>Name:</label><input class="fill-width" type="text" /><span>more text</span>
</div>

希望这对某人有帮助!

下面是旧答案

我知道这是一个老问题，但这里没有正确的解决方案，以防其他人在这里找到方法:

解决方案是将文本框包裹在一个 span 中。

HTML:

<label>Input</label>
<span>
    <input/>
</span>

CSS:

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

参见 this fiddle举个例子(现在有点过时了，因为我删除了填充以支持在输入上使用边框)。