css如何使列表横过来 |提高优先级css

ul {
display: flex; /* 设置弹性布局 */
flex-direction: row; /* 设置主轴方向为横向排列 */
justify-content: space-between; /* 将列表项的间距平均分配 */
list-style: none; /* 去除默认的列表样式 */
padding: 0; /* 去除默认的内边距 */
}
li {
text-align: center; /* 将文字居中显示 */
flex-basis: 25%; /* 每个列表项占据四等分之一的宽度 */
}

如上代码所示，大家先将ul元素设为弹性布局，主轴方向设置为横向。然后用justify-content属性将每个列表项的间距平均分配，再将默认的列表样式和内边距去除。

接着，大家对每个列表项进行样式设置。将文字居中显示，并使用flex-basis属性设置每个列表项占据总宽度的四等分之一。最后，大家通过pre标签将整段代码显示出来。