Html 获取输入以填充剩余宽度（如跨度元素）

我想让文本输入填充div中剩余的水平空间

这里的答案提供了一个使用span:执行此操作的简单示例，但由于某些原因，我无法使输入元素以相同的方式运行

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>

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

小提琴：

---

在第一个示例中，span.b填充了剩余的空间。但是，input.b不会。您可以在这里使用ol'表显示技巧。失去浮动并将

div

设置为显示：表格；和要显示的子项：表格单元格

您可能需要进行一些调整，以获得您想要的“某物”（例如，设置宽度），但这可能比您想要做的更多

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

---

这将为您带来好处：

css

.a{
显示：表格单元格；背景色：红色；
}
.b{
显示：表格单元格；背景色：绿色；宽度：100%；
}
.c{宽度：100%；}
​

html

某物
填满剩下的
某物

---

JSFIDLE:

嘿，你可以为输入按钮添加宽度，因为输入与属性的span不同，所以为什么它不填充其余部分，所以输入的CSS是

input{min width:80%或一些px值}

谢谢jmeas-你让我大部分时间都在那里，但Mark把它带回家了是的，他肯定做到了。