菜單項之間的間距（CSS）

我有一個可以在大屏幕上工作的菜單，但是當瀏覽器尺寸減小寬度（並且菜單換行）時，我無法使菜單項而不是彼此重疊。菜單項之間的間距（CSS）

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/

感謝如果你可以提供幫助。

來源

2012-01-07 Dan

請再檢查一下。它解釋了爲什麼發生。 – rekire 2012-01-07 11:56:06

是的Rekire，這對我們爲什麼這樣做並幫助了我提供了一些觀點，謝謝。 – Dan 2012-01-07 12:02:49

嘗試增加display: inline-block;到.menu

來源

2012-01-07 11:45:56

謝謝，它修復了它。 – Dan 2012-01-07 11:49:09

.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。

來源

2012-01-07 11:47:40

明白了，謝謝Sameera – Dan 2012-01-07 12:01:32

另外，如果我太晚了，你也可以設置line-height爲32.因爲你的font-size是12px加2倍10px填充。

來源

2012-01-07 11:54:10 rekire

感謝那Rekire – Dan 2012-01-07 12:00:43

菜單項之間的間距（CSS）

回答

相關問題