温馨提示：这篇文章已超过181天没有更新，请注意相关的内容是否还可用！
CSS中可以使用vertical-align属性来实现li元素的顶部对齐。vertical-align属性用于指定元素在垂直方向上的对齐方式。默认情况下，li元素的vertical-align属性值为baseline，即基线对齐。如果我们想要实现li元素的顶部对齐，可以将vertical-align属性值设置为top。
示例代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background-color: lightblue;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
在上述示例代码中，我们创建了一个无序列表（ul），其中包含三个列表项（li）。为了实现li元素的顶部对齐，我们在li的样式中将vertical-align属性值设置为top。我们还设置了li元素的宽度、高度、背景颜色和右边距，以使其更加清晰可见。
需要注意的是，vertical-align属性只对行内元素或表格单元格元素有效。在示例代码中，我们将li元素的display属性值设置为inline-block，以使其表现为行内元素的特性。这样，li元素就能够受到vertical-align属性的影响，实现顶部对齐。
如果我们希望实现li元素的底部对齐，可以将vertical-align属性值设置为bottom。同样地，如果我们希望实现li元素的中部对齐，可以将vertical-align属性值设置为middle。
通过设置li元素的vertical-align属性值为top，我们可以实现li元素的顶部对齐。需要将li元素的display属性值设置为inline-block，以使其受到vertical-align属性的影响。
