ul { list-style: none; /* 去除默认的样式 */ display: flex; /* 让列表变成 flex 容器 */ justify-content: center; /* 让列表项沿横向居中 */ align-items: center; /* 让列表项沿纵向居中 */ } li { margin: 10px; /* 列表项目之间的间距 */ }
以上代码将ul元素转换为flex容器,这使得所有列表项成为可排列的项目。通过设置justify-content属性为center,它可以在横向上居中对齐,同时通过align-items属性,可以在纵向上居中对齐。而li元素的margin属性是设置列表项之间的间距。
您可以根据需要更改以上代码中的值。这些代码是适用于大多数基本的水平列表布局的例子。