CSS使文本框填充所有可用宽度 [英] CSS make textbox fill all available width

问题描述

我的网页中有以下行

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

DropDown控件我并不真正控制宽度，因为它的大小适合任何最长期权价值是。按钮的宽度是固定的。我怎样才能使TextBox填充所有可用的剩余宽度？

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?

我试图将其放在表格中，但是遇到相同的问题，即，如何使所有其他列尽可能小以适合其内容，然后在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?

如果需要的话，很棘手的解决方案还可以，我很久以前就放弃了甚至

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.

Edit ：通过TextBox进行澄清，我的意思是<输入类型=文本 />

Edit: to clarify, by TextBox I mean <input type="text"/>

推荐答案

更新后的答案2018

碰到了这个老问题，现在有了一种更简单，更干净的方法，可以使用 CSS灵活框布局模型，现在所有主流浏览器都支持该模型。

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 Model which is now supported by all major browsers.

.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>

希望这对某人有帮助！

下方的老答案

我知道这是一个老问题，但是这里没有正确的解决方案，以防万一有人找到了答案这里：

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：

<label>Input</label>
<span>
    <input/>
</span>

CSS：

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

请参见此小提琴作为示例（由于我删除了填充以支持在输入上使用边框），现在有点过时了。

See this fiddle for an example (now slightly out of date as I removed padding in favor of using border-box on the input).

这篇关于CSS使文本框填充所有可用宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！