将ul内部的li对齐到底部

Question

我li在ul列表中有一个元素,我希望与底部对齐.

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

我怎样才能做到这一点？

我做了什么:

li4 {
  position: fixed;   
  bottom: 0;
}

这移动li4到了底部.但是,由于ul它位于隐藏菜单中,li4即使我关闭菜单(这不是我想要的)也会出现因为position: fixed

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-items(默认值align-items: stretch).

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