在底部垂直对齐列表元素

Question

Question 题

I am trying to put every li at the bottom of the ul , making the bottom of every element (not the text, the actual block element of the ui, whether that's the image or the whole li of text) touching. 我试图将每个li放在ul的底部，使每个元素（而不是文本，ui的实际块元素，无论是图像还是整个li ）的底部都接触。 This should be a simple problem with vertical-align:bottom and display:table-cell being the fix, but for some reason I haven't been able to get it to work. 这应该是一个简单的问题，其中vertical-align:bottom和display:table-cell是修复程序，但是由于某些原因，我无法使其正常工作。 What is the best way to accomplish this? 做到这一点的最佳方法是什么？

Its likely there's a question that already answered this, but I've spent a lot of time searching. 可能有一个问题已经回答了这个问题，但是我花了很多时间进行搜索。 If there's one that applies, please just point me to it. 如果有一项适用，请给我指出。

Example 例

Fiddle With It: 摆弄它：

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

HTML 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 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;
}

Answer 1

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

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

You are setting a padding on the bottom. 您正在底部设置padding 。 You should counteract that and double your padding on top and set your padding-bottom to 0 . 您应该对此加以抵消，并在顶部double your padding ，并将padding-bottom设置为0 。

Because you had padding applied, it WAS on the bottom technically. 因为你已经padding应用，它是在底部技术上。 The only problem is it also expanded all the way to the top. 唯一的问题是它也一直扩展到顶部。

Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/ 编辑： http ： //jsfiddle.net/SinisterSystems/rxg9m/4/

Aligning WITHIN the ul is very tricky, and your best bet would be to just align the ul inside of a wrapper of sorts. 在ul对齐ul是非常棘手的，最好的选择是将ul对齐在各种wrapper中。 That way, you can use position:relative; 这样，您可以使用position:relative; on the wrapper and absolutely position your ul to the bottom. 在wrapper上，并将ul absolutely position在底部。 And yeah, style from there. 是的，从那里开始。

Basic Example: 基本示例：

<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;
}

Answer 2

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

Your issue was with this 你的问题是这个

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

change it to 更改为

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

also, if you want the height to be the same, you can just do 32px instead of 16px for the first padding value, like Nicholas did in his answer. 同样，如果您希望高度相同，则只需为第一个填充值设置32px而不是16px，就像Nicholas在他的回答中所做的那样。

Answer 3

Simply remove the float:left from nav li . 只需从nav li删除float:left 。 Everything else is in order. 其他一切都井井有条。

Fiddle 小提琴

http://jsfiddle.net/mXTG6/ http://jsfiddle.net/mXTG6/

在底部垂直对齐列表元素

问题描述

Question 题

Example 例

Fiddle With It: 摆弄它：

HTML HTML

CSS CSS

3 个解决方案

解决方案1
3 2014-01-29 02:24:39

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

Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/ 编辑： http ： //jsfiddle.net/SinisterSystems/rxg9m/4/

Basic Example: 基本示例：

解决方案2
0 2014-01-29 02:24:16

解决方案3
-2 已采纳 2014-01-29 03:27:08

Fiddle 小提琴

在底部垂直对齐列表元素

问题描述

Question 题

Example 例

Fiddle With It: 摆弄它：

HTML HTML

CSS CSS

3 个解决方案

解决方案1 3 2014-01-29 02:24:39

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

Edit: http://jsfiddle.net/SinisterSystems/rxg9m/4/ 编辑： http ： //jsfiddle.net/SinisterSystems/rxg9m/4/

Basic Example: 基本示例：

解决方案2 0 2014-01-29 02:24:16

解决方案3 -2 已采纳 2014-01-29 03:27:08

Fiddle 小提琴

解决方案1
3 2014-01-29 02:24:39

解决方案2
0 2014-01-29 02:24:16

解决方案3
-2 已采纳 2014-01-29 03:27:08