首页 话题 小组 问答 好文 用户 我的社区 域名交易

[分享]css中如何让列表项横向排布

发布于 2024-11-11 19:24:42
0
8

CSS如何实现列表项横向排布 要让列表项横向排布,我们需要给列表项设置样式,这里介绍两种方法: 1. 使用display: inlineblock 给列表项设置display: inlinebloc...

CSS如何实现列表项横向排布

要让列表项横向排布,我们需要给列表项设置样式,这里介绍两种方法:

1. 使用display: inline-block

给列表项设置display: inline-block样式,就可以让它们横向排布,代码如下:

ul {
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 10px;
}

其中,list-style: none用来去掉列表项前面的默认样式,margin-right: 10px用来给列表项之间添加一定的间距

2. 使用float

给列表项设置float: left样式,也可以实现横向排布,代码如下:

ul {
  list-style: none;
}

li {
  float: left;
  margin-right: 10px;
}

同样地,list-style: none用来去掉列表项前面的默认样式,margin-right: 10px用来给列表项之间添加一定的间距

评论
91云脑
Lv.1普通用户

62845

帖子

12

小组

80

积分

站长交流