Question

我正在制作计算器布局并将所有按钮放在表格单元格中。这是代码的一部分：

<tr>
    <td><input type="button" class="button" value="1"></td>
    <td><input type="button" class="button" value="2"></td>
    <td><input type="button" class="button" value="3"></td>
    <td><input type="button" class="button" value="-"></td>
    <td rowspan="2">
    <input type="button" class="button" value="=" style="width:100%;height:100%;">
    </td>
</tr>
<tr>
    <td colspan="3">
    <input type="button" class="button" value="0" style="width:100%;"></td>
    <td><input type="button" class="button" value="+"></td>
</tr>

所以我不想制作＆＃39; =＆＃39;按钮以适合（垂直）它当前所在的表格单元格，并且我已将css包含在标记中。但它没有用。

我发现有人通过设置＆＃34; height：100％;＆＃34;来判断使用CSS的样式。但这对我来说似乎没什么用。有趣的是，＆＃34;宽度：100％;＆＃34;似乎工作得很好。

有人可以帮助我。

更新：我选择使用<a>作为按钮。

<tr>
    <td><a class="number">1</a></td>
    <td><a class="number">2</a></td>
    <td><a class="number">3</a></td>
    <td><a class="operator">+</a></td>
    <td><a class="operator">-</a></td>
</tr>
<tr>
    <td><a class="numberempty" style="border-bottom-left-radius:5px;"></a></td>
    <td><a class="number">0</a></td>
    <td><a class="numberempty"></a></td>
    <td colspan=2><a class="equals">=</a></td>
</tr>

Answer 1

<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
<td rowspan="2" style="height: 100%;"><input type="button" class="button" value="-" style="height:100%;"></td>
<td rowspan="2" style="height: 100%;">
<input type="button" class="button" value="=" style="height:100%;">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="button" value="0" style="width:100%;"></td>
<td><input type="button" class="button" value="+"></td>
</tr>
</table>

请尝试这个希望它会有所帮助

Answer 2

将高度添加到<td rowspan="2" height="100px">

http://jsfiddle.net/p55czapy/24/

格式化html输入按钮以适合（垂直）具有rowspan的表格单元格

2 个答案: