CSS 使文本框填充所有可用宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3193880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS make textbox fill all available width
提问by fearofawhackplanet
I have the following "line" in my web page
我的网页中有以下“行”
<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>
The DropDown control I don't really have control over the width, as it sizes to fit whatever the longest option value is. The Buttons are fixed width. How can I get the TextBox to fill all available remaining width?
DropDown 控件我并没有真正控制宽度，因为它的大小适合任何最长的选项值。按钮是固定宽度的。如何让 TextBox 填充所有可用的剩余宽度？
I tried putting it in a table but run into the same problem, ie how do I make all other columns as small as possible to fit their content and then the TextBox column fill remaining width?
我尝试将它放在表格中，但遇到了同样的问题，即如何使所有其他列尽可能小以适应其内容，然后 TextBox 列填充剩余宽度？
Hacky solutions are fine if necessary, I've long ago given up any pretence of even caring about CSS standards when it's so difficult to do the simplest thing.
如果有必要，Hacky 解决方案很好，我很久以前就放弃了任何假装，甚至在做最简单的事情如此困难时甚至关心 CSS 标准。
Edit: to clarify, by TextBox I mean <input type="text"/>
编辑：澄清一下，我的意思是 TextBox<input type="text"/>
回答by dekin88
UPDATED ANSWER IN 2018
2018 年更新的答案
Just came across this old question and there is now a much simpler and cleaner way to achieve this by using the CSS Flexible Box Layout Modelwhich is now supported by all major browsers.
刚刚遇到这个老问题，现在通过使用所有主要浏览器都支持的CSS 灵活框布局模型，现在有一种更简单、更清晰的方法来实现这一点。
.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>Hope this helps someone!
希望这可以帮助某人！
OLD ANSWER BELOW
下面的旧答案
I know this is an old question but the correct solution isn't here so just in case somebody else finds there way here:
我知道这是一个老问题，但正确的解决方案不在这里，以防万一其他人在这里找到方法：
The solution is to wrap the textbox in a span.
解决方案是将文本框包裹在一个跨度中。
HTML:
HTML：
<label>Input</label>
<span>
<input/>
</span>
CSS:
CSS：
label {
float: left;
}
input {
width: 100%;
box-sizing:border-box;
}
span {
display: block;
overflow: hidden;
}
See this fiddlefor an example (now slightly out of date as I removed padding in favor of using border-box on the input).
看到这个小提琴的例子（现在有点过时了，因为我删除了填充以支持在输入上使用边框框）。
回答by bets
Here is what worked for me. Note that in some cases I had to use between items otherwise it fell to the next line.
这对我有用。请注意，在某些情况下，我必须 在项目之间使用，否则它会落到下一行。
.flexContainer {
display: flex;
width:100%;
}
input {
width: 100%;
}<div class="flexContainer">
<span>text: </span> <input/> <label>text</label>
</div>回答by JochenJung
I would suggest the following:
我建议如下：
<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>
回答by xil3
You can set the width of the textbox to 100% (with css as you did with the div), so it'll be spanned to the full extent of it's parent (assuming the parent tag extends the full screen).
您可以将文本框的宽度设置为 100%（使用 css，就像您对 div 所做的一样），因此它将跨越其父级的整个范围（假设父级标签扩展了全屏）。
回答by Pere Villega
The only way I see it feasible is with Javascript, so you get the width of the div (in pixels), deduct the current size of the other controls and add the result as with of the input. That would require you to put the text inside a span control (so you can get its size).
我认为可行的唯一方法是使用 Javascript，因此您可以获得 div 的宽度（以像素为单位），减去其他控件的当前大小并将结果添加为输入。这将要求您将文本放在跨度控件中（这样您就可以获得它的大小）。
回答by Jonny Haynes
Set the width of the textboxto 100% with the css property display: inline;?
textbox使用 css 属性将 的宽度设置为 100% display: inline;？
回答by Abel Callejo
This is not doable in CSS as far as Chrome is concerned. The feasible way is by manipulating the size attributeof the form control through JavaScript. If the length of the stringis 25, add an extra of at least 10 for the clearance.
就 Chrome 而言，这在 CSS 中是不可行的。可行的方法是通过 JavaScript来操纵表单控件的size 属性。如果字符串的长度为 25，则为间隙添加至少 10 的额外值。
HTML
HTML
<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />
JavaScript / jQuery
JavaScript / jQuery
<script>
var value = jQuery('#textbox1').val(); // 43
jQuery('#textbox1').attr('size', value.length + 10 ); // resizes the textbox
</script>
Another option also is by pre-calculating the size from a back-end script.
另一种选择是通过后端脚本预先计算大小。
PHP / HTML
PHP/HTML
<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />
