我的网页中有以下“行”
<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>
我实际上无法控制 DropDown 控件的宽度,因为它的大小适合最长的选项值。按钮是固定宽度的。如何让 TextBox 填充所有可用的剩余宽度?
我试着把它放在一个表格中,但遇到了同样的问题,即如何使所有其他列尽可能小以适应它们的内容,然后 TextBox 列填充剩余宽度?
如果有必要,Hacky 解决方案很好,我很久以前就放弃了任何假装甚至关心 CSS 标准,因为做最简单的事情是如此困难。
编辑:澄清一下,我所说的 TextBox 是指 <input type="text"/>
最佳答案
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举个例子(现在有点过时了,因为我删除了填充以支持在输入上使用边框)。
关于CSS使文本框填充所有可用宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3193880/