html - 在长高度的 ul 元素中如何在底部有两个元素

Question

我有一个简单的 ul 元素，它有很大的高度，我想在 ul 元素的底部放置最后两个 li 元素，然后放在最佳。

可以看到当前的实现here .

代码是这样的:

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

我尝试了来自 here 的解决方案和 here , 但这些是 not working .

Answer 1

我在这里看到的解决方案是 flexbox

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: flex-start;
}

ul li:nth-last-child(2) {
  margin-top: auto;
}

<ul>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
</ul>