Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 margins用于将li对齐到底部。

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

另外，如果justify-content为flex-start或center（demo），则滚动会有效。

Answer 2

您可以使用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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: