[分享]css中如何让无序列表同行

CSS是网页设计中的重要组成部分，它可以帮助我们控制网页的各种样式。在处理无序列表时，我们常常会遇到列表项下无法在同一行排列的问题。下面介绍两种解决该问题的方法。方法一： ul { liststyle...

CSS是网页设计中的重要组成部分，它可以帮助我们控制网页的各种样式。在处理无序列表时，我们常常会遇到列表项下无法在同一行排列的问题。下面介绍两种解决该问题的方法。

方法一：
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: inline-block;
}
li {
   display: inline-block;
} 

以上代码首先把ul标签的默认样式去掉，然后把ul标签的外边距和内边距都设置为0，接着通过display:inline-block让ul标签变为行内块级元素。同时，我们还需要将li标签也设置为行内块级元素，这样就可以做到让无序列表的每个列表项在同一行排列。

方法二：
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
}
li {
   margin-right: 10px;
}
li:last-of-type {
   margin-right: 0;
} 

方法二采用了flex布局，首先也是把ul标签的默认样式去掉，然后通过display:flex把ul标签的布局方式改为flex布局。由于flex布局默认将flex容器内的子元素横向排列，因此我们只需要对li标签添加间距即可。最后，我们通过:last-of-type伪类给最后一个列表项设定margin-right:0，以解决末尾多余的间距问题。