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

我的网页中有以下“行”

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

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

我尝试将其放入表格中，但遇到了同样的问题，即如何使所有其他列尽可能小以适合其内容，然后 TextBox 列填充剩余宽度？

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

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

2018 年更新答案

刚刚遇到这个老问题，现在有一种更简单、更干净的方法可以通过使用来实现这一点CSS 灵活盒子布局模型 https://www.w3.org/TR/css-flexbox-1/现在所有主流浏览器都支持。

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

希望这对某人有帮助！

下面是旧答案

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

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

HTML:

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

CSS:

label {
    float: left;
}

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

span {
    display: block;
    overflow: hidden;
}

See 这把小提琴 http://jsfiddle.net/josh_fuggle/EjLfP/1/举个例子（现在有点过时了，因为我删除了填充以支持在输入上使用边框框）。