在容器的底部（而不是顶部）堆叠元素

Question

我有一个具有固定高度的<ul> ，我需要里面的<li>堆叠在底部（而不是顶部）。

我在<ul>上尝试了vertical-align: bottom ，但这并没有改变任何东西。

内容li有可能溢出，如果他们这样做，我需要滚动条才能工作。

 ul { border: 1px solid red; height: 250px; vertical-align: bottom; } li {} 

 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 

JsFiddle： https ：//jsfiddle.net/hbcnvk4s/

谢谢 ！

Answer 1

试试CSS flexbox ：

 ul { display: flex; /* establish flex container */ flex-direction: column; /* align children vertically */ border: 1px solid red; height: 250px; } li:first-child { margin-top: auto; /* shift top li, and all li's beneath, to the bottom */ } 

 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 

Flex auto边距用于将li s对齐到底部。

虽然justify-content: flex-end也会将项目对齐到底部，但当项目溢出容器时，滚动机制不起作用（ demo | bug report ）。

顺便说一下，如果justify-content是flex-start或center （ demo ），则滚动会起作用。

Answer 2

你可以用position: absolute; bottom: 0 position: absolute; bottom: 0 。

https://jsfiddle.net/hbcnvk4s/1/

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

div {
  border: 1px solid red;
  height: 250px;
  position: relative;
}

ul {
  bottom: 0;
  position: absolute
}

vertical-align不那么容易

Answer 3

你也可以使用flex-direction：column-reverse。

 ul { display: flex; /* establish flex container */ flex-direction: column-reverse; /* align children vertically AT BOTTOM */ border: 1px solid red; height: 250px; } 

 <ul> <li>item</li> <li>item</li> <li>item</li> </ul>