,可以通过以下步骤实现:
以下是一个示例代码:
HTML代码:
<div class="menu-container">
<ul class="menu">
<li>菜单项 1</li>
<li>菜单项 2</li>
<li>菜单项 3</li>
<li>菜单项 4</li>
<li>菜单项 5</li>
</ul>
</div>
CSS代码:
.menu-container {
height: 400px; /* 设置父容器的高度 */
}
.menu {
display: flex; /* 使用flexbox布局 */
flex-direction: column; /* 垂直排列菜单项 */
list-style-type: none; /* 去除默认的列表样式 */
}
.menu li:last-child {
margin-top: auto; /* 将最后一个菜单项与底部对齐 */
}
这样,最后一个垂直UL子菜单就会与底部对齐了。根据实际情况,可以根据需要调整父容器的高度和最后一个菜单项的margin-top值。
领取专属 10元无门槛券
手把手带您无忧上云