jquery - 输入元素的流体宽度

Question

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

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

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

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

不胜感激!!!

Answer 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，还有其他方法可以做到这一点，也许最常见的原因是需要 box-shadow 在 input:focus 或类似的地方。

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