CSS菜單背景高度和文本高度

Question

我想在菜單項後面使用背景圖像和/或顏色。使用圖像或僅使用背景顏色，背景只能匹配文本的高度。背景的高度需要爲30px，文本需要16px並居中 - 就像普通的按鈕一樣。我已經嘗試了所有我能想到的CSS組合，但無法獲得我期待的結果。

#menu-container { 
    /*float: left;*/ 
width: 960px; 
margin:50px auto 0 auto; 
height:50px; 
    } 

    #menu ul { 
text-align: left; 
height:50px; 
    } 


    #menu ul li { 
display: inline; 
background-image: url(images/menubutton.png); 
background-repeat: no-repeat; 
    } 

    #menu ul li a { 
text-transform: uppercase; 
padding-right: 13px; 
padding-left: 13px; 
font-size: 16px; 
    /*line-height: 0.2em;*/ 
color: #000; 
font-style: normal; 
letter-spacing: 1px; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
    Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 400; 
    } 

    #menu ul li a:hover { 
color: #ff0000; 
text-decoration: none 
    } 

Answer 1

這裏是你需要的代碼：

#menu ul li { 
    display: inline-block; 
    background-color: #a0a0a0; /* I changed this for testing */ 
    background-repeat: no-repeat; 
    padding-top: 7px; 
    padding-bottom: 7px; 
} 

基本上，它使用的是哪個display: inline阻止你能夠調節高度。你也不能使用display: block，因爲那樣它們不會全部在同一條線上。所以，display: inline-block正是你所需要的。
然後我加padding-top和padding-bottom與7px每個以保持文本在中間。

這裏是一個工作DEMO

希望這有助於。