Html 在长高度的ul元件中，如何在底部有两个元件

我有一个简单的

ul

元素，高度很大，我想要最后两个

li

元素放在

ul

元素的底部，放在顶部

您可以看到当前的实现

代码如下：

.my-ul{
高度：90vh；
宽度：40%；
背景颜色：灰色；
}

第一要素
第二要素
第三要素
第四要素
第五要素

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

ul{
显示器：flex；
弯曲方向：立柱；
高度：300px；
调整内容：灵活启动；
}
李：第n个孩子（2）{
页边顶部：自动；
}

首先
首先
首先
首先
首先
首先

对最后两个元素使用css选择器。请参见下面的示例代码：

<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>

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}
li:last-child {
  position: fixed;
  top: 370px;
}
li:nth-child(4) {
  position: fixed;
  top: 350px;
}

第一要素
第二要素
第三要素
第四要素
第五要素

.我的ul{
高度：90vh；
宽度：40%；
背景颜色：灰色；
}
李：最后一个孩子{
位置：固定；
顶部：370px；
}
李：第n个孩子（4）{
位置：固定；
顶部：350px；
}

n最后一个子项

会更好，因为您可能不确定列表项的数量。是的，对于较大的项目列表，使用

n最后一个子项

更为正确。