html – CSS显示输入内联(最后输入宽度:100%)

前端之家收集整理的这篇文章主要介绍了html – CSS显示输入内联(最后输入宽度:100%)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要创建一个带有几个输入的行,并确保它们总是填充div,我已经添加了宽度: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

解决方法

使用一点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

猜你在找的HTML相关文章