Question

我正在制作一个计算器，我希望桌子的行和列中的所有按钮在水平和垂直方向上相互对齐。它们现在水平对齐，因为我有行，但我希望垂直具有相同的大小，尽管我放在按钮中。谢谢。

Answer 1

在css中添加特定宽度

input {
   text-align:center;
   width:100px;
}

Answer 2

像这样写你的CSS：

<style>
td{
  text-align:center;
  }
  button{
    width:100%;
  }

和你的html一样：

    <tr>
      <td>
        <button>BACK</button>
      </td>
      <td>
        <button>C</button>
      </td>
      <td>
        <button>CE</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>7</button>
      </td>
      <td>
        <button>8</button>
      </td>
      <td>
        <button>9</button>
      </td>
    </tr> etc ...

然后，如果你想使用jquery，你可以使用这个方便的脚本使所有tds的大小最宽：

  $(function(){
    var widest=Math.max($('td').width());
    $('td').width(widest);
  })

如果您不想使用jquery，请使用@Abhidevs方法设置固定宽度。

使用我的版本here

使列和行中的所有按钮大小相同？

2 个答案: