将文本与底部对齐？答案

【问题标题】：Aligning text against bottom?将文本与底部对齐？
【发布时间】：2013-06-16 10:29:54
【问题描述】：

我很难弄清楚如何将文本的底部边框与标题的底部边框对齐。谁能告诉我该怎么做？将不胜感激。我已经尝试了很多东西。

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;
}

【问题讨论】：

标签： html css

【解决方案1】：

你可以将 ul 的 margin-bottom 设置为 0px

    #header ul {
        margin-bottom:0px;
    }

http://jsfiddle.net/YeJc6/6/

【讨论】：

【解决方案2】：

也许只需将#nav 设置为#header 的底部：

#nav
{
position:absolute;
bottom:0px;
height:20px;    //whatever height/size of text is needed
}

这告诉它把#header中的#nav对齐到#header的底部。

【讨论】：

bottom 将被忽略，除非 #nav 是定位元素。删除 ul 上的默认 16px 边距可以解释问题。
IMO position: absolute 应该是最后的手段。
这是为什么呢？我一直在用它
这里有一篇文章tyssendesign.com.au/articles/css/absolute-positioning-pitfalls 讨论了一些陷阱。不是很详细，相信还有其他类似的文章可以找到。

【解决方案3】：

在您的情况下，您只需要删除 ul 的底部边距。

#nav ul {
    margin-bottom: 0;
}

【讨论】：