CSS键盘布局

我想创建一个只有字符的小动态键盘，但我有点失落。CSS键盘布局

首先，这是我的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>

来源

2014-02-20 Daniel Ziegler

看键盘在你的面前。它看起来像钥匙像桌子一样排列？当然不是;）所以不要使用'display：table'。 –

你可以使用'block'作为表格和行，'inline-block'作为单元格。 – helderdarocha

如何只使用这个CSS：

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

JSFiddle Demo

来源

2014-02-20 14:05:35

可爱和简单 – SaturnsEye

尼克的回答只是为了一点乐趣，我让它更像“键盘一样”http://jsfiddle.net/u4qa7/2/ – SaturnsEye

@Adsy是的我有一个去： http://jsfiddle.net/u4qa7/1/ :) –

也许晚点亮吧！但是，这个怎么样：

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/

来源

2014-03-12 07:12:34

回答

相关问题