Question

我知道这是一个令人羞辱的基本问题，但是我无法将导航div（绿色边框）与父div（蓝色边框）底部的徽标div（红色边框）对齐。我尝试了vertical-align：bottom，但是没有用，有什么建议吗？

alt text http://img64.imageshack.us/img64/6756/align.png

HTML：

<div id="banner">
        <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
        <ul id="lang">
            <li><a href="index.php">English</a></li>
            <li><a href="es/index.php">Español</a></li>
            <li><a href="tw/index.php">中文(繁體)</a></li>
            <li><a href="cn/index.php">中文(简体)</a></li>
        </ul>
        <ul id="nav"> 
            <li class="home"><a href="index.html">home</a></li>
            <li class="portfolio"><a href="portfolio.php">portfolio</a></li>
            <li class="about"><a href="about.php">about</a></li>
            <li class="contact"><a href="form.html">contact</a></li>
        </ul>
    </div>

CSS：

#banner {
    background-color: #FBFBFB;
    float: left;
    padding: 10px 15px;
    width: 928px; /* 720 */
    border: 1px solid #E2E2E2;
}
#banner h1 {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    display: inline; /* ie6 hack for double margin */
    height: 21px;
    font-size: 32px;
    float: left;
    text-indent: -9999px;
    width: 169px;
}
#header a { 
    color: #999;
}
#lang {
    float: right;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a { 
    font-size: 10px;
}
#nav {
    float: left;
    list-style: none;
    padding: 0 0 0 20px;
}
#nav li {
    float: left;
    margin: 0 30px 0 0;
}
#nav li a {
    float: left;
    font-size: 16px;
    outline: none;
    text-decoration: none;
}
#nav li a:hover {
    color: #666;
}

Answer 1

一个简单的解决方法是将父级设置为position：relative，将菜单设置为postion：absolute;底部：0;但它并不理想。

我猜最好的选择是（因为它们有固定的高度），给它一个带有正确像素数的边缘顶部。

Answer 2

尝试将导航div的高度设置为等于徽标图像的高度。然后使用vertical-align：bottom将导航放在其包含div的底部。

问题对齐元素（HTML和CSS）

2 个答案: