CSS如何实现列表项横向排布 要让列表项横向排布,我们需要给列表项设置样式,这里介绍两种方法: 1. 使用display: inlineblock 给列表项设置display: inlinebloc...
要让列表项横向排布,我们需要给列表项设置样式,这里介绍两种方法:
给列表项设置display: inline-block样式,就可以让它们横向排布,代码如下:
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 10px;
}
其中,list-style: none用来去掉列表项前面的默认样式,margin-right: 10px用来给列表项之间添加一定的间距
给列表项设置float: left样式,也可以实现横向排布,代码如下:
ul {
list-style: none;
}
li {
float: left;
margin-right: 10px;
}
同样地,list-style: none用来去掉列表项前面的默认样式,margin-right: 10px用来给列表项之间添加一定的间距