html - 将 ul 内的 li 对齐到底部

Question

我在 ul 列表中有一个 li 元素，我希望它与底部对齐。

+------+
| li1  |
| li2  |
| li3  |
|      |
|      |
|      |
| li4  |
+------+

我该怎么做？

我尝试过的:

li4 {
  position: fixed;   
  bottom: 0;
}

这将 li4 移到了底部。但是，由于 ul 位于隐藏菜单内，因此即使我关闭菜单(这不是我想要的)，li4 也会出现，因为 位置:固定

Answer 1

您可以使用 flexbox 来实现这一点。演示:

ul {
  /* just height for demo */
  height: 200px;
  /* become a flex-container */
  /* its children will be flex-items */
  display: flex;
  /* move flex-items in column */
  flex-direction: column;
}

/* add maximum available margin-top to last child */
/* this can be replaced with any selector like nth-child */
/* and will move flex-items to the bottom if any available vertical space */
ul > :last-child {
  margin-top: auto;
}

/* just outline to show results */
/* should be removed in production */
ul, li {
  outline: 1px dotted gray; 
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six (at the bottom)</li>
</ul>

添加aling-items: flex-start到ul如果你不想让li占据所有的容器宽度，因为默认flex -元素被拉伸(stretch)(默认 align-items: stretch)。

您还可以添加 align-items: center 使 flex-items 居中或添加 align-items: flex-end 以移动 li权利。