将文本对齐到a标签的底部 [英] align the text to the bottom of the a tag

问题描述

如何将文字传送到li内的标签底部。

这是我的代码

 < div id =navigation> 
< ul> 
< li>< a href =＃> ter< / a>< / li> 
< li>< a href =＃> redg< / a>< / li> 
< li>< a href =＃> ryer更多< / a>< / li& 
< li>< a href =＃>更多< / 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 - 停止（50％，＃000000），停止（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; 
} 
  
您可以使用relative +绝对定位。
  #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 。
 
How do I get the text to the bottom of the a tag which is inside the li.

Here is my code
<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> ​
And css is
#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; 
}​

解决方案
You can use relative+absolute positioning.
#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;

}​
You can see demo here.

                        
这篇关于将文本对齐到a标签的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！