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

我在我的网页上有以下“行”

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

“一些文本”“一些其他文本”

下拉控件我不能真正控制宽度，因为它的大小适合最长的选项值。按钮的宽度是固定的。如何让文本框填充所有可用的剩余宽度

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

如果有必要的话，黑客解决方案是不错的，我很久以前就放弃了任何假装关心CSS标准的行为，因为做最简单的事情非常困难

---

编辑：为了澄清这一点，我所说的文本框是指

您可以将文本框的宽度设置为100%（使用css，就像使用div一样），因此它将跨越其父项的全部范围（假设父项标记扩展了整个屏幕）。

我建议如下：

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>

“一些文本”“一些其他文本”

我认为唯一可行的方法是使用Javascript，因此您可以获得div的宽度（以像素为单位），扣除其他控件的当前大小，并将结果添加到输入中。这将要求您将文本放在一个范围控件中（这样您就可以得到它的大小）

使用css属性

display:inline将
文本框的宽度设置为100%？
2018年更新答案

刚刚遇到这个老问题，现在有一种更简单、更干净的方法来实现这一点，方法是使用现在所有主流浏览器都支持的


.flex容器{
显示器：flex；
}
.填充宽度{
弹性：1；
}

名称：更多文本
以下是对我有效的方法。请注意，在某些情况下，我必须在项目之间使用
，否则它将落在下一行


.flexContainer{
显示器：flex；
宽度：100%；
}
输入{
宽度：100%；
}

文本：文本
就Chrome而言，这在CSS中是不可行的。可行的方法是通过JavaScript操纵表单控件的属性。如果管柱长度为25，则为间隙增加至少10

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" />

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />



JavaScript/jQuery

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>


var value=jQuery（'#textbox1'）.val（）；//43
jQuery（'#textbox1'）.attr（'size'，value.length+10）；//调整文本框的大小

另一个选项是通过从后端脚本预先计算大小

PHP/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" />

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />


您可以使用“宽度样式”属性控制下拉列表的宽度。。。etal@Pradyumma：我不想设置下拉列表的宽度。它的大小应该适合它的内容。对于记录，文本框的意思是
而不是
正确吗？这只是将文本框放在它自己的行上。我想把所有的内容都放在一行上那也不行，仍然使文本框100%为div宽度，因此现在它只是从屏幕右侧消失。我创建了此小提琴的另一个版本，它清除了所有多余的代码：@josh fuggle谢谢josh我已更新了答案，以包括您的小提琴，因为它确实更清晰。没有问题，很高兴它有帮助：）@dekin88，一个很好的解决方案，但是你的意思是要使用
左填充：5px？这会更有意义。@Sheridan实际上Josh小提琴中的填充物应该在右边，因为如果移除，文本输入的边缘将被切断。I通过应用
框大小：边框框来固定添加到示例中的输入元素，并完全删除填充，因为它只是美观的，而不是功能性的。如果设置
显示：内联
样式，则宽度样式将不再工作，因为该元素是
内联
。要使用宽度样式，您需要将显示为块或内联块…或允许您设置宽度的内容。如果不希望宽度属性影响样式，
display:inline
效果很好，因为宽度样式不再适用。这不是使用弹性框的正确方法。您永远不需要使用不间断的空格来进行布局。我已经用弹性框的正确用法更新了我的答案。@dekin88我看到你在我的答案的基础上更新了你的答案，并对其进行了改进。好的，无意冒犯。我只是想在这里向将来可能会看到这一点的任何人指出，这不是flex box的预期使用方式。