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

试试这个

<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 2

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

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

如果这是不可能的，你的下一个选择是javascript（你应该使用现在存在的许多库中的至少一个来增强javascript，使javascript更容易使用）。

Answer 3

试试这个：

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

Answer 4

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

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

HTML按钮填充剩余宽度

4 个答案: