將文本對齊到標記的底部

這裏是我的代碼

<div id="navigation">   
    <ul> 
     <li><a href="#">ter</a></li> 
     <li><a href="#">redg</a></li> 
     <li><a href="#">ryer More</a></li> 
     <li><a href="#">More</a></li> 
    </ul>   
</div>

和CSS是

#navigation { 
    width: 100%; 
    height: 50px; 
    clear: both; 
    color: #333; 
    background: #2b2b2b; 
    background: -moz-linear-gradient(top, #2b2b2b 0%, #171717 49%, #000000 50%, #000000 100%); 
    background: -webkit-gradient(linear, left top, left bottom, 
       color-stop(0%,#2b2b2b), color-stop(49%,#171717), 
       color-stop(50%,#000000), color-stop(100%,#000000)); 
} 
#navigation ul{ 
    margin:0 auto; width:auto; 
    padding:0; 
} 
#navigation ul li{ 
    display:inline-block; 
    color:#fff; 
    font:12px Verdana, Geneva, sans-serif; 
    padding:0 25px; 
    background:url(images/nav_img.jpg) no-repeat center top; 
    height:50px; 
} 
#navigation ul li a{ 
    display:inline-block; 
    color:#fff; 
    font:12px Verdana, Geneva, sans-serif; 
    text-decoration:none; 
    height:50px; 
}

來源

2012-06-14 Sowmya

是否要將標籤本身的文本設置爲底部。是嗎？ – freebird

它對你有幫助嗎？ – freebird

不知道你在問什麼......是這樣嗎？ http://jsfiddle.net/vgEWf/ –

您可以使用相對+絕對定位。

#navigation ul li{ 
    position: relative; 
    display:inline-block; 
    color:#fff; 
    font:12px Verdana, Geneva, sans-serif; 
    padding:0 25px; 
    background:url(images/nav_img.jpg) no-repeat center top; 
    width: 100px; 
    height:50px; 
} 
#navigation ul li a{ 
    position: absolute; 
    top: 30px; 
    display:inline-block; 
    color:#fff; 
    font:12px Verdana, Geneva, sans-serif; 
    text-decoration:none; 
    height:50px; 

}

你可以在這裏看到demo。

來源

2012-06-14 13:15:55 Jia

謝謝。有效 – Sowmya

入住這demo fiddle。希望它幫助。

來源

2012-06-14 13:04:13 freebird

使用'line-height'是絕對是個好主意。 –

@MoinZaman這是一個好主意，不確定是否用戶需要，因爲這個問題有點混亂。 – freebird

你也可以將代碼發佈到你的答案中。 – 2012-06-14 14:13:44

也許......

不要設置你的「一」元素「高度」明確
設置「顯示」到「塊」
添加填充頂到你的「A」元素將它們推到您需要的位置

來源

2012-06-14 13:11:35 Staple

將文本對齊到標記的底部

回答

相關問題