Question

我的HTML布局需要一些帮助。我正在尝试制作一个简单的计算器数字键盘。我希望我的“=”按钮更大，所以我使用rowspan将它拉伸成两行。但是，（在Chrome中）这似乎使我的最后两行比前两行更大。我已经尝试将我的单元格填充/间距设置为零，但我得到了相同的效果。

更新既然没有人回答......

我一直在阅读，似乎已达成共识，不将table用于布局目的。有了这个，你应该使用什么？我发现大量材料解释了为什么表格如此糟糕，但很少关于如何在没有表格的情况下制作表格/网格布局。使用table以外的其他内容做到这一点会更好吗？

/更新

这是HTML（我打算稍后应用CSS）：

<html>
    <div>
        <table width="200" height="300" border="0" style="table-layout:fixed">
            <tr>
            <td colspan="4"><input type="text" style="width:100%; text-align:right" value="0" readonly /></td>
            </tr>

            <tr>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="7" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="8" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="9" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="-" /></td>
            </tr>

            <tr>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="4" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="5" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="6" /></td>
            <td colspan="1" rowspan="1"><input type="button" style="width:100%;height:100%" value="+" /></td>
            </tr>

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

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

        </table>
    </div>
</html>

FireFox上的按钮尺寸看起来很好。暂且不说：有谁知道为什么IE9将按钮缩小为奇怪的尺寸？

这是一张图片，看到底部的两行略大：

enter image description here

Answer 1

这种方法太复杂了。最好设置input元素（按钮）的大小，让浏览器相应地分配单元格的大小。以下样式表说明了一种更简单的方法。它看起来有点复杂，因为它必须覆盖您现在在HTML属性中的一些设置。通常最好在外部样式表中或至少在style元素中一致地进行样式设置。如果简化标记，也可以减少样式表。

table, td { height: auto !important; width: auto !important; }
td { width: 2em; height: 2em; padding: 0;}
input { padding: 0; font-size: 100%;
        width: 2em !important; height: 2em !important; }
td[rowspan="2"] input { height: 4em !important; }
td[colspan="4"] input { width: 8em !important; }

HTML：跨越时的统一单元格大小

1 个答案: