Question

我希望文本输入填充div中剩余的水平空间。

这里的答案提供了一个使用span https://stackoverflow.com/a/3499333/165673执行此操作的简单示例，但由于某种原因，我无法使我的input元素以相同的方式运行。

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/

Answer 2

您可以在此处使用ol'表格显示技巧。丢失浮动并将div设置为 display：table; ，将子项设置为 display：table-cell; 。

Here's an example showing it.您可能需要根据需要调整'something'（例如，设置宽度），但这可能比您想要的更多要做。

div {
  display: table;
  width: 100%;
}
.a, .b {
  display: table-cell;
}
.b {
  width: 100%; 
}

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

2 个答案:

CSS

HTML