定位标志和导航链接不对齐答案

【问题标题】：positioning logo and navigation links not aligning定位标志和导航链接不对齐
【发布时间】：2013-07-19 23:12:49
【问题描述】：

问题截图：

黄色块是徽标，蓝色框是导航链接（我已将它们消隐）。我想对齐底部的链接，使它们粘在正文内容的顶部（白框）。我该怎么做？这是相关的 CSS 和 HTML。

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background-image:url(logo.png);
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

    <div id="header">
        <div id="logo"><a href="/"></a></div>
        <div id="nav">
            <ul>
            <li><a href="#">*****</a></li>
                            [...]
            </ul>
        </div>
    </div>

提前致谢。

【问题讨论】：

标签： html css positioning

【解决方案1】：

试试这个。似乎可以在 Firefox/Mac 中使用

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background: #00ffff;
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding-top: 18px;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

【讨论】：

适用于 FF/XP。对于 IE，我必须在页面元素中添加一个 margin-top: -20px 属性。
不过，如果用户的字体稍有不同（Linux？）会不会有点错位？

【解决方案2】：

左下角？如果是这样 - 首先在您的#nav 块上设置clear: both;。

除此之外，我真的不明白你的问题 - 你能制作一张你希望它看起来如何的 jpg 吗？

【讨论】：

【解决方案3】：

你可以像这样使用绝对定位：

#header {
    position: relative;

    height: 42px;
}
#nav {
    position: absolute;
    bottom: 0px;

    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}

在这种方法中，您可以使用与“header”划分相关的绝对定位来制作“nav”。

【讨论】：