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

【问题标题】：CSS make textbox fill all available widthCSS使文本框填充所有可用宽度
【发布时间】：2011-03-12 18:06:36
【问题描述】：

我的网页中有以下“行”

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

DropDown 控件我并没有真正控制宽度，因为它的大小可以适应最长的选项值。按钮是固定宽度。如何让 TextBox 填充所有可用的剩余宽度？

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

如果需要，Hacky 解决方案很好，我早就放弃了任何假装甚至关心 CSS 标准，因为做最简单的事情是如此困难。

编辑：澄清一下，我的意思是 TextBox <input type="text"/>

【问题讨论】：

您可以使用宽度样式属性控制下拉菜单的宽度。等
@Pradyumma：我不想设置下拉菜单的宽度。它的大小应该适合它的内容。
郑重声明，TextBox 是指<input type="text"/> 而不是<textarea></textarea>，对吗？

标签： css textbox width

【解决方案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;
}

查看this fiddle 的示例（现在稍微过时了，因为我删除了填充以支持在输入上使用边框框）。

【讨论】：

我已经创建了这个小提琴的另一个版本，它清除了所有多余的代码：jsfiddle.net/josh_fuggle/EjLfP/1
@josh-fuggle 谢谢乔希，我已经更新了答案以包括你的小提琴，因为它确实更清晰。
没问题，很高兴它有帮助:)
@dekin88，一个很好的解决方案，但您的意思是使用padding-left: 5px; 吗？那会更有意义。
@Sheridan 实际上，乔希小提琴中的填充应该在右侧，因为如果文本输入的边缘被删除，它就会被切断。我通过将box-sizing: border-box; 应用于示例中的输入元素并完全删除填充来修复它，因为它只是美观，而不是功能。

【解决方案2】：

就 Chrome 而言，这在 CSS 中是不可行的。可行的方法是通过JavaScript来操作表单控件的size attribute。如果字符串的长度是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" />

JavaScript / jQuery

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

另一种选择也是通过后端脚本预先计算大小。

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 ); ?>" />

【讨论】：

【解决方案3】：

这对我有用。请注意，在某些情况下，我必须在项目之间使用&nbsp;，否则它会掉到下一行。

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

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

【讨论】：

这不是使用弹性盒子的正确方法。您永远不需要使用不间断的空格来使您的布局正常工作。我已经通过正确使用弹性框更新了我的答案。
@dekin88 我看到你根据我的更新了你的答案并改进了它。好的。
无意冒犯。我只是想在此提醒任何可能在未来看到此内容的人，这不是 flex box 的预期使用方式。

【解决方案4】：

使用css属性display: inline;将textbox的宽度设置为100%？

【讨论】：

如果设置display:inline样式，宽度样式将不再起作用，因为元素是inline。要使用宽度样式，您需要将显示设置为块或内联块......或者可以让您设置宽度的东西。如果您不希望 width 属性影响您的样式，display:inline 效果很好，因为 width 样式不再适用。

【解决方案5】：

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

【讨论】：

【解决方案6】：

我建议如下：

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

【讨论】：

这也不起作用，仍然使文本框 100% 的 div 宽度，所以现在它只是离开屏幕的右侧。

【解决方案7】：

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

【讨论】：

这只是将文本框放在它自己的行上。我希望所有内容都在一行中。