CSS 将 li 对齐到 ul 的底部

在本文中，我们将介绍如何使用CSS将列表项（li）对齐到无序列表（ul）的底部。

阅读更多：CSS 教程

使用定位属性和负边距

我们可以使用CSS中的定位属性和负边距来实现将列表项对齐到无序列表底部的效果。首先，我们需要将ul的定位属性设置为relative，这样列表项的定位将以ul为参考。

ul {
  position: relative;
}

接下来，我们给li添加绝对定位，并将底边距设置为负值，以将列表项向上移动到ul的底部。这样，列表项就能够对齐到ul的底部了。

li {
  position: absolute;
  bottom: -20px; /* 底边距为负值 */
}

这是一个简单的示例，展示了如何将列表项对齐到无序列表的底部。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

通过上面的CSS代码，我们可以看到所有的列表项都对齐到了ul的底部。

另一种方法是使用Flexbox布局来实现列表项对齐到无序列表底部的效果。Flexbox是CSS3引入的一种强大的布局模式，可以轻松地控制元素的对齐和排列。

如果我们将ul的display属性设置为flex，并将flex-direction属性设置为column，那么列表项将按列布局，并且可以非常简单地使用align-items属性将它们对齐到底部。

ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 将列表项对齐到底部 */
}

这是一个示例，展示了如何使用Flexbox将列表项对齐到无序列表的底部。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

通过上述CSS代码，我们可以看到所有的列表项现在都对齐到了ul的底部。

除了上述两种方法外，还有其他一些方法可以将列表项对齐到无序列表的底部。例如，使用Grid布局、使用表格布局等。根据实际情况和需求，选择最适合的方法来实现对齐效果。

ul {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(0, 1fr);
  align-items: end; /* 将列表项对齐到底部 */
}

ul {
  display: table;
}

li {
  display: table-cell;
  vertical-align: bottom; /* 将列表项对齐到底部 */
}

本文介绍了如何使用CSS将列表项对齐到无序列表的底部。我们讨论了使用定位属性和负边距以及使用Flexbox布局的方法，并提供了示例代码。此外，我们也提到了其他一些可以实现此效果的方法，如Grid布局和表格布局。根据具体情况和需求，选择适合的方法来对齐列表项到无序列表的底部。希望本文对你有所帮助！