Responsive input fields in CSS - fluid width?

问题:

I'm trying to make the following sign up box fluid responsive in CSS.

Here is an example: http://cssdesk.com/aYLwW

I would like the input field width to be "flexible" and shrink depending on the page.

You can see from the example when I shrink the window, the button eventually drops down below the input field.

With this in mind, what should I set my input#iiihuu-iiihuu field width to be to allow the input field to gracefully resize without any bumpage?

Many thanks for any pointers :-D

回答1:

Give a min-width:550px; to the div containing the text-box and button. Your control will not break then.

Working ex. here http://cssdesk.com/dUjxF

As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.

回答2:

You can change the css widths to percent based. See here