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>

希望这有助于某人!

以下老答案

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

解决方案是将文本框包装在一个范围内.

HTML:

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

CSS:

label {
    float: left;
}

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

span {
    display: block;
    overflow: hidden;
}

看一下这个小提琴的例子(现在我稍微过时了,因为我删除了padding,转而使用输入上的border-box).

Answer 2

这对我有用.请注意,在某些情况下,我不得不 在项目之间使用,否则它会落到下一行.

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}

<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>