Question

我一直在尝试为计算器绘制HTML文件。但似乎左右两侧的按钮之间存在巨大差距。如何对齐这些按钮？以下是HTML代码。非常感谢帮助

<table border=1>
  <tr>
    <td>
      <input type="text" id="calcText" maxlength="30" name="calcDisplay">
    </td>
  </tr>

  <tr>
    <td><input type="button" id="bt0" value="0"></td>
    <td><input type="button" id="bt1" value="1"></td>
    <td><input type="button" id="bt2" value="2"></td>
    <td><input type="button" id="btX" value="X"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt3" value="3"></td>
    <td><input type="button" id="bt4" value="4"></td>
    <td><input type="button" id="bt5" value="5"></td>
    <td><input type="button" id="bt-" value="-"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt6" value="6"></td>
    <td><input type="button" id="bt7" value="7"></td>
    <td><input type="button" id="bt8" value="8"></td>
    <td><input type="button" id="bt+" value="+"></td>
  </tr>

  <tr>
    <td><input type="button" id="bt9" value="9"></td>
    <td><input type="button" id="bt/" value="/"></td>
    <td><input type="button" id="bt." value="."></td>
    <td><input type="button" id="bt=" value="="></td>
  </tr>
</table>

我附上了截图，以显示当前

显示的内容

Answer 1

在calcDisplay行上使用colspan html属性使其宽度为4列。否则第一列取其最大元素的宽度：在您的情况下输入。使用colspan="4"，您可以扩展列的长度以获得4个colmuns

＆＃13;

    <html>
<table border=1>
  <tr>   
    <td colspan="4">
      <input type="text" id="calcText" maxlength="30" name="calcDisplay">
    </td>
  </tr>   

  <tr>
      <td><input type="button" id="bt0" value="0"></td>
      <td><input type="button" id="bt1" value="1"></td>
      <td><input type="button" id="bt2" value="2"></td>
      <td><input type="button" id="btX" value="X"></td>
  </tr>

  <tr>
      <td><input type="button" id="bt3" value="3"></td>
      <td><input type="button" id="bt4" value="4"></td>
      <td><input type="button" id="bt5" value="5"></td>
      <td><input type="button" id="bt-" value="-"></td>
  </tr>

   <tr>
    <td><input type="button" id="bt6" value="6"></td>
        <td><input type="button" id="bt7" value="7"></td>
        <td><input type="button" id="bt8" value="8"></td>
    <td><input type="button" id="bt+" value="+"></td>
    </tr>

    <tr>
         <td><input type="button" id="bt9" value="9"></td>
         <td><input type="button" id="bt/" value="/"></td>
         <td><input type="button" id="bt." value="."></td>
     <td><input type="button" id="bt=" value="="></td>
    </tr>
</table>
</html>

＆＃13;

HTML表格列对齐问题

1 个答案: