html - CSS 在线显示输入(最后输入宽度 :100%)

Question

我需要用一些输入创建一行，并确保它们始终填充 div，我在最后一个输入中添加了 width:100%

<div style="width:300px;background:#eee;height:30px">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <input value="last" style="width:100%" type="button"/>
</div>

此示例无法正常工作，因为最后一个输入宽度与 div 的宽度相同，并且它出现在第二行。

如何让它们都出现在同一行？

Jsfiddle

Answer 1

只需一点 CSS，您就可以做到这一点。将最后一个输入包装在一个跨度中并添加此 CSS:

<div style="width:300px;background:#eee;height:30px;">
    <input value="first" style="width:80px" type="button"/>
    <input value="second" style="width:80px" type="button"/>
    <span id="last"><input value="last" style="width:100%" type="button" /></span>
</div>
#last {
    overflow:auto;
    display:block;
}
input {
    float:left;
}

jsFiddle example