7

div に残っている水平方向のスペースをテキスト入力で埋める必要があります。

ここでの答えは、スパンでこれを行う簡単な例を提供します: https://stackoverflow.com/a/3499333/165673ですが、何らかの理由で入力要素を同じように動作させることができません。

HTML: 

<div>
<span class="a">something</span>
<span class="b">fill the rest</span> 
</div>

<div>
<span class="a">something</span>
<input class="b" value="fill the rest">       
</div>

CSS: 

.a {
    float:left; background-color:red
}
.b {
    background-color:green;display:block;
}

フィドル: http://jsfiddle.net/FKZUA/1/

最初の例では、span.b が残りのスペースを埋めています。ただし、input.b はそうしません。

4

3 に答える 3

10

これでうまくいくはずです：

CSS

.a {
    display:table-cell; background-color:red;
}
.b {
    display:table-cell; background-color:green; width:100%;
}
.c { width:100%; }
​

html

<div>
  <span class="a">something</span>
  <span class="b">fill the rest</span> 
</div>
<div>
  <span class="a">something</span>
  <span class="b"><input class="c" value="fill the rest" /></span>
</div>

jsfiddle : http://jsfiddle.net/FKZUA/55/

于 2013-01-05T03:24:09.610 に答える
3

ここでは、昔ながらのテーブル表示トリックを使用できます。フロートを失い、次のように設定しdivます。および表示する子: table-cell; .

これを示す例を次に示します。「何か」を希望どおりに取得するには、いくつかの調整が必要になる場合があります (たとえば、幅の設定)。

div {
  display: table;
  width: 100%;
}
.a, .b {
  display: table-cell;
}
.b {
  width: 100%; 
}
于 2013-01-05T03:17:12.043 に答える