创建不带< table>的HTML数字键盘。布局 [英] Create an HTML Numeric Keypad without <table> layout

问题描述

我正在尝试创建一个HTML数字键盘，就像在某些键盘上发现的那样。

I am trying to create an HTML 'numeric keypad', like those found on some keyboards. I am stumped on how to do the layout without using a table.

我使用Bootstrap（v3.1.1），所以我的第一直觉是试图使用 col - 类来重现在键盘上发现的4列键。这是尴尬，虽然，我不能容易地获得按钮的大小在不同级别的嵌套 div 容器之间是一致的。我失败了。

I am using Bootstrap (v3.1.1) so my first instinct was to attempt to use its col- classes to reproduce the 4 columns of keys found on a keypad. This was awkward though and I couldn't easily get the sizing of the buttons to be consistent between the different levels of nested div containers. I failed fast.

我知道我可以使用< table> code> colspan s和 rowspan 。但是使用表格布局并不感觉正确，因为它显然不是表格数据。

I knew I could use a <table> based layout to accomplish this easily with colspans and rowspans. But it didn't feel right using a table layout for this, because it is clearly not tabular data.

我试图通过使用CSS display 属性的 table * 值。这比我第一次尝试更干净，我使用的类比我之前尝试使用的Bootstrap更有意义。很遗憾，我了解到 display：table 不支持colspan / rowspan 。这里是这种尝试的JSFiddle 。我试图使用 height：144px在 tall-key 上伪造 rowspan 但是只是增加了整行的高度。

I tried to get the benefits of tables by using the CSS display property's table* values. This was cleaner than my first attempt and the classes I used were more meaningful than the Bootstrap ones I was attempting to use before. Unfortunately, I learned that display:table does not support colspan/rowspan. Here is a JSFiddle of that attempt. I tried to fake a rowspan on the tall-keys by using height: 144px; but that just increased the height of the entire row.

我放弃了并最终创建了一个 ; table> 。这是 JSFiddle 。

I gave up and ultimately created the layout with a <table>. Here is the JSFiddle.

是有一种方法可以创建一个数字键盘而不使用HTML < table> ？

Is there a way to create a numeric keypad without using an HTML <table>?

注意：键可以是静态值（例如 70px ），但宽度不能。 键盘的宽度是容器的可变百分比，因为响应。

Note: The heights of keys can be static values (e.g. 70px) but the widths cannot. The width of the entire keypad is a variable percentage of the container, because responsive.

推荐答案

通过使用浮动行为，您可以使用一堆inline-blocks创建它。每个块都向右浮动（因为大的垂直元素在右边）。

By using float behavior, you can create this with a bunch of inline-blocks. Each of the blocks are floated to the right (because the big vertical elements are on the right).

因此，数字键盘上的按钮位于左上角右上角的HTML中。例如。第一个块是 - 按钮，其次是 * ， / ， Num-Lock ， + 等。

So the buttons on the numpad are placed in the HTML from the top right corner going left. E.g. the first block is the - button, followed by *, /, Num-Lock, +, and so on.

为了创建一个双倍的垂直按钮，我附加了属性 v2 （你可以使用类，但我觉得不同） ，并创建一个双倍大小的水平按钮，我附加了属性h2。

In order to make a double-sized vertical button, I attached the attribute v2 (you could've used classes for this, but I felt like being different), and to make a double-sized horizontal button, I attached the attribute h2.

，向下滚动到编辑。

container {
    width: 442px;
    border: 1px solid black;
    display: inline-block;
}

block {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: red;
    float: right;
}

block[v2] {
    height: 210px;
}

block[h2] {
    width: 210px;
}

HTML：

HTML:

<container>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block v2=""></block>
    <block></block>
    <block></block>
    <block></block>
    <block></block>
    <block h2=""></block>
</container>

JSFiddle

---

编辑：

您可以使用calc和百分比使宽度适合：

JSFiddle

---

If it has to be responsive, you can use calc and percentages to make the widths fit:

block
{
    width: calc(25% - 10px);
    margin: 5px;
}

block[h2]
{
    width: calc(50% - 10px);
}

这篇关于创建不带< table>的HTML数字键盘。布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！