HTML按钮填充剩余宽度

Question

我不是 HTML 专家，只是偶尔做一些有趣的编码。我试图完成的是让“td”中的按钮填充剩余的宽度，尽可能简单。

<table width="100%">
<tr>
  <td>My Text</td>
  <td>
    <input name="x" id="y" type="text" size="4" maxlength="4" />
    <input type="button" onclick="..."  value="BlaBla" />
  </td>
</tr>
<tr>
  <td>Other Text</td>
  <td>
    <input name="xx" id="yy" type="text" size="20" />
    <input type="button" onclick="..."  value="MoreBlaBla" />
  </td>
</tr>
</table>

我尝试过 100% 的宽度，但这给了我一条额外的线。我在这里检查了一些答案，例如Help with div - make div fit the remaining width，但由于我不是 HTML 专家，所以它变得太复杂了。猜猜有一个非常简单的解决方案。

Answer 1

好吧，can be done 使用 JavaScript，但看起来不太好。

一个右对齐、固定宽度的按钮looks better恕我直言。

Answer 2

试试这个

<td>
                <input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
                <input type="button" onclick="..." style="float:left;width:70%"  value="BlaBla" />
    </td>

Answer 3

基本上，没有办法使用 HTML+CSS 来指定它。在某些时候，几乎每个人都想要这个，但它并不存在。

如果您坚持使用 HTML+CSS，如果您以某种可预测的方式指定宽度（固定长度或百分比），那么您可以计算正确的百分比（或其他度量）来设置按钮宽度。这可能是最好的方法。

如果这是不可能的，那么您的下一个选择是 javascript（您应该使用现在存在的众多库中的至少一个来增强它，以使 javascript 更易于使用）。

Answer 4

试试这个：

<tr>
<td>My Text</td>
<td>
    <input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
    <div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>