问题
I have this fairly simple form:
<form action="...">
<div>
<input type="text" class="input-text" value="" name="text" />
<input type="submit" class="submit" value="Submit" />
</div>
</form>
The form is sitting inside a fixed-width div (specified in ems).
I want the textfield and button to be a single row, but the textfield width is inconsistent across browsers even when I specify its size attribute. Not wanting to specify exact widths (especially for the button) I was wondering if it was possible to give the textfield a liquid width? I want the textfield to stretch so that both it and the button can fit on a single line.
回答1:
Yeah length is for character count, not width.
You want the text box to fill all available space short of what the button takes up? This is doable with a table (but I consistently get booed on Stack Overflow for suggesting tables). Let's say for the sake of argument you use DIVs with display:table, but just for simplicity I'll illustrate with actual table markup.
<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td><input type="text" style="width:100%"></td>
<td style="width:0"><input type="submit"></td>
</tr>
</table>
The width 0 on the button cell might seem odd, but table cells take their widths only as suggestions. It'll stretch to fit the content no matter how skinny you make it.
回答2:
If you keep the default submit button styles its width will vary from one browser to the next. This also means that the text field's width you seek is a variable.
- FF: 47px + 3px border
- Chrome: 45px + 2px border
- IE8: 63px + 8px padding + 3px border
- IE7: 61px + 2px border
There is no elegant way to do it, but you have the following options:
- Use tables (Google is using tables for its search box).
- Style both the input field and submit button (Not recommended).
- Use a script (Not recommended).
来源：https://stackoverflow.com/questions/5201621/liquid-textfield-width