Liquid textfield width

Question

I have this fairly simple form:

    

        

        
                      

              相关标签:
       
      

Answer 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.

Answer 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).