twitter-bootstrap 创建一个没有 <table> 布局的 HTML 数字键盘

Create an HTML Numeric Keypad without <table> layout

提问by Jesse Webb

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.

我正在尝试创建一个 HTML '数字小键盘'，就像在某些键盘上找到的那样。我很难过如何在不使用表格的情况下进行布局。

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 divcontainers. I failed fast.

我正在使用 Bootstrap (v3.1.1)，所以我的第一直觉是尝试使用它的col-类来重现在键盘上找到的 4 列键。虽然这很尴尬，但我无法轻松地使按钮的大小在不同级别的嵌套div容器之间保持一致。我很快就失败了。

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.

我知道我可以使用<table>基于布局的colspans 和rowspans轻松完成此操作。但是为此使用表格布局感觉不对，因为它显然不是表格数据。

I tried to get the benefits of tables by using the CSS displayproperty'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:tabledoes not support colspan/rowspan. Here is a JSFiddle of that attempt. I tried to fake a rowspanon the tall-keys by using height: 144px;but that just increased the height of the entire row.

我试图通过使用 CSSdisplay属性的table*值来获得表格的好处。这比我的第一次尝试更清晰，而且我使用的类比我之前尝试使用的 Bootstrap 类更有意义。不幸的是，我了解到它display:table不支持 colspan/rowspan。这是该尝试的 JSFiddle。我试图通过使用rowspan在tall-keys上伪造 aheight: 144px;但这只是增加了整行的高度。

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

我放弃并最终使用<table>. 这是JSFiddle。

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

有没有办法在不使用 HTML 的情况下创建数字键盘<table>？

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

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

回答by David

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).

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

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.

因此，小键盘上的按钮从右上角向左放置在 HTML 中。例如，第一个块是-按钮，然后是*、/、Num-Lock、+等等。

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.

为了制作双倍尺寸的垂直按钮，我附加了属性v2（您可以为此使用类，但我觉得自己与众不同），为了制作双倍尺寸的水平按钮，我附加了属性 h2。

---

---

For a responsive layout, scroll down to the edit.

对于响应式布局，向下滚动到编辑。

---

---

CSS:

CSS：

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

JSFiddle

---

---

Edit:

编辑：

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

如果它必须具有响应性，您可以使用 calc 和百分比来使宽度适合：

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

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

JSFiddle

JSFiddle