css中ul一行显示 |快速 css 样式库

下面介绍几种方法：

1. 使用浮动

给每个列表项添加float: left，即可在同一行内显示，代码如下：

ul {
list-style: none;
}
li {
display: inline-block;
float: left;
margin-right: 10px;
}

2. 使用inline-block

给每个列表项添加display: inline-block，即可在同一行内显示，代码如下：

ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 10px;
}

3. 使用flexbox

使用display: flex属性即可实现同一行内显示，代码如下：

ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 10px;
}

总结：

以上三种方法均可实现ul一行显示多个列表项，具体使用根据场景和个人习惯选择即可。值得注意的是，在使用inline-block和flexbox时要注意去除两个li之间的空格，否则会出现不必要的间隔。