无法让 CSS 替换表格（2 个单元格，宽度 = 1）

Question

是的，我知道这似乎又是同一个问题，但给我一个机会...... 我正在尝试创建类似于 http 地址框和“go”按钮的东西：

[输入框 - 整个窗口的宽度减去右键的大小] [转到按钮]

使用表格非常容易（也可以使用 <form> 和输入框）

<table width="100%"><tr>
<tr>
<td>free text goes in here and takes as much space as available! free text goes in here and takes as much space as available!</td>
<td width="1"><a href="">GO</a></td>
</tr></table>

在回答之前，请注意，CSS“成功”的关键不是将 GO 按钮的宽度设置为固定！我知道如何在 CSS 中以固定宽度浮动的方式做到这一点，但是......这意味着如果“GO”文本更改为“RUN”或字体更改，我必须手动重新设置宽度固定的右边部分。这使得 CSS (IMNSHO) 的全部意义毫无意义，尤其是。如果一张桌子足够聪明，可以做到这一点。

Answer 1

Demo fiddle

HTML：

<form action="">
    <fieldset>
        <button type="submit">GO</button>
        <span>
            <input type="text" />
        </span>
    </fieldset>
</form>

CSS：

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
button {
    float: right;
}
span {
    display: block;
    overflow: hidden;
    padding-right: 10px;
}
input {
    width: 100%;
}

在 IE7、IE8、IE9、Opera 11、Chrome 12、FF 4、SafariWin 5 中的 Win7 上测试。

感谢thirtydot's recent revision。