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>

希望这有助于某人！

OLD ANSWER BELWAN

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

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

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以获取示例（现在稍微过时，因为我删除了填充，转而使用输入上的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>

Answer 3

我建议如下：

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

7 个答案: