定位徽标和导航链接不对齐

时间:2008-12-13 03:02:25

标签: html css positioning

问题的屏幕截图:

http://i36.tinypic.com/dfxdmd.jpg

黄色块是徽标,蓝色框是导航链接(我已将其删除)。我想对齐底部的链接,使它们粘在身体内容的顶部(白框)。我该怎么做? 这是相关的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>

提前致谢。

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

你可以使用这样的绝对定位:

#header {
    position: relative;

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

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

在这种方法中,你使用与“标题”除法相关的绝对定位来制作“nav”。

答案 2 :(得分:0)

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

除此之外,我真的不明白你的问题 - 你能不知道你喜欢它的外观?