在div中安装文本框和按钮

Question

如何将<input type="text"/>和<input type="button"/>放在一行中，就像这样......
...以便它们适合父母（例如<div>），文本框占用最大可能宽度？

当然，可以使用额外的div。 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的方法。