メニューアイテム間の間隔（CSS）

Question

大型スクリーンで動作するメニューがありますが、ブラウザのサイズが縮小されてメニューがラップされても、メニューの項目は表示されません。ではなく、が重なっています。

HTML：

<div style="padding-top: 10px"> 
    <a class="menu" style= 
    "border: #B1B1B1 solid; border-width: 0px 1px 0px 1px" href="#">Design 
    and Install</a><a class="menu" href="#">About this site</a><a class= 
    "menu" href="#">Products</a><a class="menu" href="#">F A Q</a><a class= 
    "menu" href="#">Portfolio</a><a class="menu" href="#">Contact</a> 
</div> 

CSS：

.menu { 
    font-family: Verdana; 
    font-size: 12px; 
    color: #000; 
    text-align: center; 
    text-decoration: none; 
    border: #B1B1B1 solid; 
    border-width: 0 1px 0 0; 
    padding: 10px 17px 10px 12px; 
} 

.menu:link,.menu:visited { 
    background-color: #E5E5E5; 
} 

.menu:hover,.menu:active { 
    background-color: #F9C232; 
} 

http://jsfiddle.net/9j77E/1/

おかげであなたは助けることができます。

Answer 1

試行追加display: inline-block;.menuに

Answer 2

.menu { 
    font-family:Verdana; 
    font-size: 12px; 
    color: #000000; 
    text-align: center; 
    text-decoration: none; 
    border: #B1B1B1 solid; 
    border-width: 0px 1px 0px 0px; 
    padding: 10px 17px 10px 12px; 
    display:inline-block; 
} 

表示：インラインブロック。このプロパティを追加してテストしました。checkを入力してください。

Answer 3

また遅すぎると、line-heightを32に設定することもできます。font-sizeは12pxと2倍の10pxのパディングです。