将 ul 内的 li 对齐到底部

Question

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

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

我怎样才能做到这一点？

我试过什么：

 li4 {
  position: fixed;
  bottom: 0;
}

这将 li4 移到了底部。但是，由于 ul 在隐藏菜单中，即使我关闭菜单（这不是我想要的）， li4 也会出现，因为 position: fixed

原文由 Sam Kah Chiin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

Add aling-items: flex-start to ul if you don’t want li to occupy all container width because by default flex-items are stretched (default align-items: stretch ）。

您也可以添加 align-items: center 到中心弹性项目或 align-items: flex-end 移动 li 右边。

原文由 Vadim Ovchinnikov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果我理解正确，请试试这个。

 ul {
        position: relative;
        height: 200px;
    }

ul li.li4 {
       position: absolute;
       bottom: 0;
    }

 <ul>
   <li>li1</li>
   <li>li3</li>
   <li>li2</li>
   <li class="li4">li4</li>
</ul>

谢谢。

原文由 Rohan 发布，翻译遵循 CC BY-SA 3.0 许可协议