[英]Aligning text against bottom?
我很难弄清楚如何将我的文本的底部边框与标题的底部边框对齐。 有人可以告诉我该怎么做吗? 不胜感激。 我尝试了很多事情。
http://jsfiddle.net/Zevoxa/YeJc6/
HTML
<div id="header">
<img id="logo" src="/img/logo.png"/>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS
/*-- HEADER --*/
#header {
top:0px;
width:100%;
padding-top:20px;
padding-bottom:0px;
background-color:#2C2E31;
border-bottom:#242426 solid 2px;
text-align:center;
}
img#logo {
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
#nav ul li {
list-style-type:none;
display:inline;
margin-bottom:0px;
padding-bottom:0px;
padding-right:20px;
font-size:20px;
}
#nav ul li a {
color:#FAFAFA;
text-decoration:none;
border-bottom:#FAFAFA solid 2px;
}
/*-- CONTENT --*/
body {
margin:0px;
padding:0px;
background-color:#2A2B2D;
}
只需使用以下命令将#nav设置在#header的底部
#nav
{
position:absolute;
bottom:0px;
height:20px; //whatever height/size of text is needed
}
这告诉它将#header中的#nav对齐到#header的底部。
就您而言,您只需要删除ul的底部边距。
#nav ul {
margin-bottom: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.