html - 垂直对齐列表项到底部

Question

我已经阅读了本网站和其他网站上的大量相关文章，但似乎我仍然缺少一些非常基本的东西。

我有一个父 div 和一个无序列表。 div 具有设置的高度，我想列出内联行的元素并位于父 div 的底部。

谢谢!

fiddle : http://jsfiddle.net/np2qm6rz/1/

<div class="parent">
    <ul>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
    </ul>
</div>
.parent {
    border: 1px solid lime;
    height: 100px;
}
ul {
    border: 1px solid black;
}
li {
    border: 1px solid red;
    display: table-cell;
    vertical-align: bottom
}

Answer 1

一种方法是在 .parent 中添加一个全高(伪)元素来影响父级的基线并将内联级别元素移动到框的底部，然后使用 vertical-align: bottom 声明，以便将元素(包括具有下部的字母)保留在父元素中:

EXAMPLE HERE

.parent:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
}

ul {
    display: inline-block;
    vertical-align: bottom;
}

li { float: left; }

您可以引用我的回答以获取更多信息:

• How to align a label to the "BOTTOM" of a div in CSS?