在底部垂直对齐列表元素

debugcn 发表于 Dev

詹姆斯·赫利（James Hurley）

问题

我试图将每个元素都li放在的底部ul，使每个元素（而不是文本，ui的实际块元素，无论是图像还是整个li文本）的底部都接触。这应该是一个简单的问题，vertical-align:bottom并且display:table-cell是可以解决的，但是由于某些原因，我无法使其正常工作。做到这一点的最佳方法是什么？

可能已经有一个问题已经回答了这个问题，但是我花了很多时间进行搜索。如果有一项适用，请给我指出。

例子

摆弄它：

http://jsfiddle.net/rxg9m/

的HTML

<head runat="server">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
</head>

<body>
    <div id="outer">
        <div id="inner">
            <nav>
                <ul>
                    <li><a href="#" class="left">Home</a>
                    </li>
                    <li><a href="#" class="left">Product</a>
                    </li>
                    <li><a href="#" id="logo"><img src="logo.png" alt="Javid Logo"/></a>
                    </li>
                    <li><a href="#" class="right">Contact</a>
                    </li>
                    <li><a href="#" class="right">Info</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>

的CSS

* {
    font-family:Calibri;
}
#outer {
    text-align:center;
}
#inner {
    display:inline-block;
}
nav ul {
    margin:0px;
    padding:0px;
    bottom:0;
    list-style:none;
}
nav li {
    float:left;
    display:table-cell;
    vertical-align:bottom;
    margin:0px;
    padding:0px;
}
nav li a {
    padding:16px 8px 16px 8px;
    margin:0px;
    width:120px;
    display:block;
    background-color:lightblue;
    text-decoration:none;
    text-emphasis:none;
    color:black;
    border:0px none black;
    border-bottom:1px solid black;
}
nav li a.left {
    text-align:left;
}
nav li a.right {
    text-align:right;
}
#logo {
    padding:0px;
    width:auto;
    height:auto;
    line-height:0px;
    border:0px none black;
}