css的li怎么横过来 |幼儿园 css

ul {
display: flex;  /* 设置ul的display属性为flex */
flex-direction: row;  /* 设置flex-direction属性为row，让li标签横向排列 */
justify-content: space-between;  /* 设置justify-content属性为space-between，让li标签之间有间隔 */
}
li {
list-style: none;  /* 去掉li标签的默认样式 */
}

通过以上代码，大家实现了将li标签横向排列的效果。通过设置ul的display属性为flex，让其成为一个弹性盒子，再通过设置flex-direction属性为row，让li标签在水平方向排列。同时，大家还通过设置justify-content属性为space-between，让li标签之间有间隔，更加美观。

除了使用flex布局外，大家还可以使用float属性来实现li标签的横向排列。

ul {
overflow: hidden;  /* 清除浮动，使ul标签包含li标签 */
}
li {
float: left;  /* 使用float属性将li标签向左浮动 */
}

通过以上代码，大家实现了将li标签横向排列的效果。使用float属性可以让li标签脱离文档流，实现横向排列的效果。同时，通过设置ul的overflow属性为hidden，可以清除浮动，使ul标签包含li标签，让整体布局更加稳定。