Question

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

顶部栏中的左侧空间需要宽度（意思是：绿色区域应覆盖所有黄色区域，无论红色宽度）
我不想添加更多的html元素。因此，在下面的代码中给出了这个结构，我尝试使用css。
我可以使用 js 轻松完成此操作，但我现在想避免使用它。

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

正如您所看到的，我现在使用right: 0作为.input input，但它不起作用。右边还有黄色空间。这意味着input元素宽度没有扩展。我试过position: absolute并且它仍然是一团糟。

帮助很感激!!!

Answer 1

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

Answer 2

尝试使用

display: table;

和

display: table-cell;

因为它会自动调整大小。

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

输入元件的流体宽度

2 个答案: