获取输入以填充剩余宽度,如span元素

Question

我希望有一个文本输入填充div中剩余的水平空间.

这里的答案提供了一个使用span执行此操作的简单示例: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不会.

Answer 1

这应该是你的诀窍:

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/