2

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

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

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

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

帮助是感谢！

4

2 回答 2

2

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;
}

为什么有overflow: hidden帮助？

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

这是一个使用示例：http display: table-cell: //jsfiddle.net/thirtydot/jBQDB/4/

于 2013-02-12T09:00:04.557 回答
1

尝试使用

display: table;

和

display: table-cell;

因为它会自动调整大小。

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

于 2013-02-12T09:04:24.390 回答