在网页设计中，列表（Lists）是一种常见的元素，用于组织信息、创建导航栏或展示数据。默认情况下，HTML中的
一、使用CSS Flexbox布局
Flexbox是CSS3中的一种布局方式，它允许我们以灵活的方式排列容器内的元素。通过将
-
元素设置为Flexbox容器，并调整
-
元素的属性，可以实现垂直排列的效果。
1.1 设置-
为Flexbox容器
-
元素垂直排列，而
align-items: stretch;
则保证了 -
元素的高度会自动调整，以适应容器的高度。
1.2 调整 -
元素的属性
接下来，为了保持 - 元素的垂直排列，可以设置
-
元素的
margin
属性为
0
，并添加适当的
padding
。
li {
margin: 0;
padding: 10px;
}
这样， -
元素将垂直排列，并具有适当的间距。
二、使用CSS Grid布局
CSS Grid布局也是一种强大的布局方式，它允许我们在二维空间内排列元素。通过将-
元素设置为Grid容器，并调整
-
元素的属性，可以实现垂直排列的效果。
2.1 设置-
为Grid容器
-
元素垂直排列。
ul {
display: grid;
grid-template-rows: 1fr;
grid-gap: 10px;
}
这里，
grid-gap
属性用于设置网格之间的间距。
2.2 调整 -
元素的属性
与Flexbox布局类似，设置 -
元素的
margin
属性为
0
，并添加适当的
padding
。
li {
margin: 0;
padding: 10px;
}
三、使用CSS伪元素
伪元素是CSS中的一种特殊元素，可以用来添加到元素的开头或结尾。通过使用伪元素，可以创建个性化的列表布局。
3.1 使用
:before
伪元素
在 -
元素中，可以使用
:before
伪元素添加一个特殊标记，例如一个图标或文本。
li:before {
content: ‘• ‘;
margin-right: 8px;
}
这里，
:before
伪元素添加了一个点号和空格，作为列表项的标记。
3.2 调整 -
元素的属性
与前面提到的布局方式类似，设置 -
元素的
margin
属性为
0
，并添加适当的
padding
。
li {
margin: 0;
padding: 10px;
}
四、总结
通过以上几种技巧，我们可以轻松实现CSS中 - 元素的垂直排列，并打造个性化的列表布局。在实际应用中，可以根据具体需求和设计风格，灵活运用这些技巧，创造出独特的视觉效果。不断实践和创新，您将发现更多CSS布局的奥秘。
将-
元素的
display
属性设置为
grid
，并设置
grid-template-rows
为
1fr
，确保 -
元素垂直排列。
-
元素的属性，可以实现垂直排列的效果。
首先，将-
元素的
display
属性设置为
flex
，使其成为Flexbox容器。
ul {
display: flex;
flex-direction: column;
align-items: stretch;
}
这里，
flex-direction: column;
确保了 -
元素垂直排列，而