CSS键盘布局

Question

我想创建一个只有字符的小型动态键盘,但我有点迷失.

首先,这是我的jsfiddle:http://jsfiddle.net/45zDd

正如你所看到的,它已接近完成,但第二行和第三行需要一个边距或其他东西,所以它看起来像一个真正的键盘.

这是可能的,因为它是一张桌子,所以我认为不可能给一个边缘,对吗？如果不可能,您是否知道如何在没有Javascript的情况下创建简单的键盘布局的另一种动态方式？

CSS:

.keyboard {
    display: table;
    width: 500px;
    height: 250px;
}

.keyboardRow {
    display: table-row;
    border: 1px solid red;
    text-align: center;
}

.key {
    display: table-cell;
    border: 1px solid black;
    text-align: center;
}

HTML:

<div class="keyboard">
    <div class="keyboardRow">
        <span class="key">Q</span>
        <span class="key">W</span>
        <span class="key">E</span>
        <span class="key">R</span>
        <span class="key">T</span>
        <span class="key">Y</span>
        <span class="key">U</span>
        <span class="key">I</span>
        <span class="key">O</span>
        <span class="key">P</span>
    </div>
    <div class="keyboardRow">
        <span class="key">A</span>
        <span class="key">S</span>
        <span class="key">D</span>
        <span class="key">F</span>
        <span class="key">G</span>
        <span class="key">H</span>
        <span class="key">J</span>
        <span class="key">K</span>
        <span class="key">L</span>
    </div>
    <div class="keyboardRow">
        <span class="key">Z</span>
        <span class="key">X</span>
        <span class="key">C</span>
        <span class="key">V</span>
        <span class="key">B</span>
        <span class="key">N</span>
        <span class="key">M</span>
    </div>
</div>

Answer 1

如何使用这个CSS:

.keyboardRow { text-align:center }
.key { display:inline-block; border:1px solid red; padding:10px;margin-bottom:5px; }

JSFiddle演示