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

回答

相關問題