How to stretch the width of an element, so that it is (100% - widths of its siblings)?

Question

Say, I have the following unordered list. The button has width: auto. How do I style the elements, so #textField would stretch as much as possible, so the width of #textField and the button would add up to 100%?

<ul>
  <li>
    <input id="textField" type="text" /><input type="button" />
  </li>
</ul>

Answer 1

How about this?

<ul>
  <li>
    <input id='textField' style='width: 80%'/><input type='button' style='width: 20%'/>
  </li>
</ul>

Answer 2

<ul>
  <li style="position:relative; width:100%;">
    <input id="textField" type="text" style="position:absolute; left:0px; right:80px" />
    <input type="button" value="Submit" style="position:absolute; right:0; width:auto" />
  </li>
</ul>

Adjust right:80px to set margin between textbox and button;

Answer 3

I ended up using a table and stretch the cell that contains the text field:

<ul>
  <li>
    <table>
      <tr>
        <td width="100%"><input width="100%" id="textField" type="text" /></td>
        <td><input type="button" width="auto" /></td>
      </tr>
    </table>
  </li>
</ul>