在底部垂直对齐列表元素

时间：2014-01-29 02:18:32

标签： html css vertical-alignment

问题

我试图将每个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;
}

3 个答案:

答案 0 :(得分：3)

在这里小提琴：http://jsfiddle.net/SinisterSystems/rxg9m/2/ 

nav li a {
    padding:32px 8px 0px 8px;

您在底部设置padding。您应该反驳这一点并在double your padding顶部，并将padding-bottom设置为0。

因为您已应用padding，所以技术上底部 WAS 。唯一的问题是它也一直扩展到顶部。

修改：http://jsfiddle.net/SinisterSystems/rxg9m/4/

在ul中对齐非常棘手，最好的办法就是将ul内的wrapper对齐。position:relative;。这样，您可以使用wrapper上的absolutely position和ul <div class="wrapper"> <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> </div> * { margin:0; padding:0; } .wrapper { height:200px; background:#CCC; position:relative; } ul { position:absolute; bottom:0; width:100%; } ul li { list-style:none; float:left; display:inline-block; min-width:25%; text-align:center; } 下方的{{1}}。是的，那里的风格。

基本示例：

{{1}}

答案 1 :(得分：0)

http://jsfiddle.net/rxg9m/1/

你的问题是这个

nav li a {
    padding:16px 8px 16px 8px;

将其更改为

nav li a {
    padding:16px 8px 0px 8px;

另外，如果你想要高度相同，你可以为第一个填充值做32px而不是16px，就像尼古拉斯在答案中所做的那样。

答案 2 :(得分：-2)

只需从float:left移除nav li即可。其他一切都井然有序。

小提琴

http://jsfiddle.net/mXTG6/

相关问题
最新问题