Question

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

我有一个父div和一个无序列表。 div有一个设置的高度，我想列出内联行和父div底部的项目。

谢谢！

<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?

Answer 2

JSFIDDLE

将position:relative添加到您的父标记并将position:absolute; bottom:0px添加到您的列表中，以便它粘贴到div的底部。

编辑：更新了jsfiddle链接。

Answer 3

你可以使用

display: table-cell;

父div上的

JS FIDDLE

Answer 4

使用您自己的代码，这是一个更简单的解决方案...

Link ->

这是CSS

.parent {
    border: 1px solid lime;
    height: 100px;
    display: table-cell;
    vertical-align: bottom;
}
ul {
    display: inline-block;
    display: table-cell;
    border: 1px solid black;
}
li {
    border: 1px solid red;
    display: table-cell;
}

这是HTML

<div class="parent">
    <ul>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
    </ul>
</div>

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

4 个答案: