Question

我有以下Google Chrome浏览器：

<table>
    <tr>
        <td width="80px">
            Text
        <td width="100%">
            <form>
                <input style="width:100%" type="text"/>
                <button>Submit</button>
            </form>
        </td>
        <td width="80px">
            Text
        </td>
    </tr>
</table>

问题是当您将屏幕调整为小尺寸时，“提交”按钮会在文本框下方回绕。如何保持“按钮”不被包裹（如按钮显示在文本框下方几个像素），同时保持文本框尽可能宽？

Answer 1

http://jsfiddle.net/N36a7/

<form>
    <table>
        <tr>
            <td width="80px">Text</td>
            <td width="100%">
                <input style="width:100%" type="text"/>
            </td>
            <td>
                <button>Submit</button>
            </td>
            <td width="80px">Text</td>
        </tr>
    </table>
</form>

只需按下它自己的按钮即可。

Answer 2

首先，将以下样式添加到form以防止它包装：

form{
    white-space: nowrap;
}

然后从输入中删除样式width=100%，这会导致它占据td内的所有水平空间。

JS小提琴： http://jsfiddle.net/B4eWz/

如何防止两个元素包装？

2 个答案: