如何防止两个元素包装？

Question

I have the following for 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>

The problem is when you resize the screen to something small, the Submit button wraps around under the textbox. How do I keep the "button" from wrapping (as in the button shows up below the textbox by a few pixels), while keeping the text box as wide as possible?

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>

Just give the button it's own td.

Answer 2

First, add the following styles to the form to prevent it from wrapping:

form{
    white-space: nowrap;
}

Then remove the style width=100% from the input, which causes it to occupy all of the horizontal space within the td .

JS Fiddle: http://jsfiddle.net/B4eWz/