如何将文本置于 li 内的 a 标签的底部。
这是我的代码
<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;
}
可以使用相对+绝对定位。
#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 here.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)