Question

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

正如您所看到的，它已接近完成，但第二行和第三行需要一个边距或其他内容，因此它看起来像一个真正的键盘。

这是否可能，因为它是一张桌子，所以我不认为可以给一个边缘，对吗？如果它不可能，您是否知道如何在没有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 Demo

Answer 2

也许点燃了很晚！但是这个怎么样：

<强> CSS

.KeyboardRow {
text-align: center;
 }
.KeyboardKey {
display: inline-block;
border: 1px solid #dcdcdc;
padding: 10px;
margin-bottom: 5px;
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
display: inline-block;
color: #777777;
font-family: arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 50px;
line-height: 50px;
width: 75px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
}


.KeyboardKey:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color: #dfdfdf;
  }

.KeyboardKey:active {
position: relative;
top: 1px;
 }
.KeyboardRow .active {
background-color: #0c57a8;
-moz-box-shadow: inset 0px 1px 0px 0px #9fc5f2;
-webkit-box-shadow: inset 0px 1px 0px 0px #9fc5f2;
box-shadow: inset 0px 1px 0px 0px #9fc5f2;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0c57a8), color-stop(1, #043078) );
background: -moz-linear-gradient( center top, #0c57a8 5%, #043078 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c57a8', endColorstr='#043078');
border: 1px solid #2358a1;
display: inline-block;
text-shadow: 1px 1px 0px #07294a;
color: #ffffff;
}
.KeyboardRow .active:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #043078), color-stop(1, #0c57a8) );
background: -moz-linear-gradient( center top, #043078 5%, #0c57a8 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#043078', endColorstr='#0c57a8');
background-color: #043078;
}

<强> HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>KeyBoard</title>
    <link href="style.keyboard.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="keyboard">
        <div class="KeyboardRow">
            <span class="KeyboardKey">Q</span>
            <span class="KeyboardKey">W</span>
            <span class="KeyboardKey">E</span>
            <span class="KeyboardKey">R</span>
            <span class="KeyboardKey">T</span>
            <span class="KeyboardKey">Y</span>
            <span class="KeyboardKey">U</span>
            <span class="KeyboardKey">I</span>
            <span class="KeyboardKey">O</span>
            <span class="KeyboardKey">P</span>
        </div>
        <div class="KeyboardRow">
            <span class="KeyboardKey active">A</span>
            <span class="KeyboardKey">S</span>
            <span class="KeyboardKey">D</span>
            <span class="KeyboardKey">F</span>
            <span class="KeyboardKey">G</span>
            <span class="KeyboardKey">H</span>
            <span class="KeyboardKey">J</span>
            <span class="KeyboardKey">K</span>
            <span class="KeyboardKey">L</span>
        </div>
        <div class="KeyboardRow">
            <span class="KeyboardKey">Z</span>
            <span class="KeyboardKey">X</span>
            <span class="KeyboardKey">C</span>
            <span class="KeyboardKey">V</span>
            <span class="KeyboardKey">B</span>
            <span class="KeyboardKey">N</span>
            <span class="KeyboardKey">M</span>
        </div>
    </div>
</body>

我改变了类名，以防你想将它用于更大的项目。 .key并不是唯一的名字。

我的小提琴链接：

http://jsfiddle.net/ferencik/EpnL3/

CSS键盘布局

2 个答案: