在div中安装文本框和按钮

Question

我怎样才能把<input type="text"/>和<input type="button"/>在同一行,像这样...
...以便它们适合父母(<div>例如),文本框占用最大可能宽度？

当然,div可以使用额外的s.table允许但不鼓励.

Answer 1

使用基于表格的方法，您可以：

<table cellspacing="0" cellpadding="0" width="100%">
    <tr>
        <td><input type="text" style="width:100%"/></td>
        <td style="width:60px"><input type="button" style="width:100%"/></td>
    </tr>
</table>

效果是一个填充其父宽度的表格，其中包含一个与填充剩余宽度的文本框相邻的固定宽度按钮。

当然，出于习惯，我会将CSS重构为外部文件。

编辑：

这是基于 div 的方法：

碰巧这些基于 div 的方法在 IE 7 和 IE8 中运行良好，但在 Firefox 中却不行

<div>
    <div style="float:right; width:60px">
        <input type="button" style="width:100%"/>
    </div>
    <div>
        <input type="text" style="width:100%"/>
    </div>
    <div style="clear:both"></div>
</div>

也许还有一种更轻量级的基于 div 的方法：

<div>
    <input type="button" style="float:right; width:60px"/>
    <input type="text" style="width:100%"/>
    <div style="clear:both"></div>
</div>

我建议使用基于 div 的浏览器测试方法。