输入元素的流体宽度答案

【问题标题】：Fluid width of input element输入元素的流体宽度
【发布时间】：2013-02-12 08:49:27
【问题描述】：

我有一个顶部栏（黄色），固定位置和宽度为 100%。在栏内，左边的div（红色）可以是任何width（流体）。右侧的div（绿色）包含input 元素：

需要有宽度作为顶部栏的剩余空间（意思是：绿色区域应该覆盖所有黄色区域，无论红色的宽度如何）
我不想添加更多的 html 元素。因此，鉴于下面代码中的这种结构，我尝试使用 css。
我可以使用 js 轻松做到这一点，但我现在想避免它。

示例代码： http://jsfiddle.net/qhoc/jBQDB/2/

如您所见，现在我将right: 0 用于.input input，但它不起作用。右边还有黄色空间。这意味着input 元素宽度没有扩展。我试过position: absolute 还是一团糟。

帮助表示感谢！！！

【问题讨论】：

标签： jquery html css layout stylesheet

【解决方案1】：

http://jsfiddle.net/thirtydot/jBQDB/3/

.input {
    overflow: hidden;
}
.input input {
    width: 100%;
    height: 50px;
    border: 0;
    outline: 0;
    /* you want this if there's any border/padding on the input */
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Why does overflow: hidden help?

如果您不能在输入的父级上使用overflow: hidden，还有其他方法可以做到这一点，可能最常见的原因是需要在input:focus 上使用box-shadow，或类似的。

下面是一个使用display: table-cell 代替的示例：http://jsfiddle.net/thirtydot/jBQDB/4/

【讨论】：

【解决方案2】：

尝试使用

display: table;

和

display: table-cell;

因为它会自动调整大小。

修订样本：http://jsfiddle.net/2VmFT/

【讨论】：