html - 如何在不将其兄弟移动到下一行的情况下将文本框设置为 100% 宽度？

Question

我感兴趣的是让文本框占据剩余空间的 100% 宽度，但不将文本“名称”或按钮放到下一行:

<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
    <span>Name:</span>
    <span><input type="textbox" style="width:100%" /></span>
    <span><input type="button" value="Search" /></span>    
</div>

http://jsfiddle.net/GP2nA/1/

如何防止文本和按钮掉落到下一行？

Answer 1

在 IE7/8、Firefox、Chrome、Opera 中测试。

Live Demo
Live Demo (minus extra wrapper div)

CSS:

#search {
    padding: 20px; background-color: #c0c0c0;
    overflow: auto
}
#search div {
    position: relative
}
.name {
    float: left
}
.input {
    position: absolute;
    top: 0; right: 70px; left:55px;
}
.submit {
    float: right
}

HTML:

<div id="search">
    <div>
    <span class="name">Name:</span>
    <span class="input"><input type="input" style="width:100%" /></span>
    <span class="submit"><input type="button" value="Search" /></span>
    </div>
</div>

(你应该有一个 form 和一个 label 标签)