2

固定位置と幅が 100%のトップバー (黄色) があります。バー内で、左div(赤) は任意width(流体) である可能性があります。右側div(緑) には、次のinput要素が含まれています。

  1. トップバーの残りのスペースとして幅が必要です (つまり、赤の幅に関係なく、緑の領域がすべての黄色の領域をカバーする必要があります) 。
  2. これ以上 html 要素を追加したくありません。したがって、以下のコードのこの構造を考慮して、css を使用しようとします。
  3. jsを使用してこれを簡単に行うこともできますが、今のところは避けたいと思います。

サンプルコード： http: //jsfiddle.net/qhoc/jBQDB/2/

ご覧のとおり、現在私はright: 0forを使用し.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入力の親で on を使用できない場合は、他の方法があります。その最も一般的な理由は、 box-shadowonなどを必要とすることですinput:focus。

display: table-cell代わりに使用する例を次に示します: http://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 に答える