[分享]css中怎么解决li叠在一起

在使用CSS进行页面布局时，常常会遇到一个问题：在使用无序列表（）或有序列表（）时，每个列表项（）会叠在一起，导致页面布局混乱难看。下面介绍几种解决这个问题的方法。一、使用display属性我们可以使...

在使用CSS进行页面布局时，常常会遇到一个问题：在使用无序列表（

）或有序列表（

）时，每个列表项（
1. ）会叠在一起，导致页面布局混乱难看。下面介绍几种解决这个问题的方法。
   一、使用display属性
   我们可以使用CSS的display属性来改变列表项的显示方式。默认情况下，列表项的display属性为list-item，可以通过将其修改为inline、inline-block或者table等属性来改变其显示方式。
   下面是示例代码：
   

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

   
   上面代码中，我们将每个列表项的display属性设置为inline-block，这样它们就不会叠在一起，而是像行内元素一样排列，同时我们添加了一个margin-right属性来控制每个列表项之间的间距。
   二、使用float属性
   我们也可以使用CSS的float属性来控制列表项的分布。将每个列表项的float属性设置为left或right，就可以让它们在父元素中左浮动或右浮动。
   下面是示例代码：
   

   ul {
     list-style: none;
     overflow: hidden;
   }
   li {
     float: left;
     margin-right: 10px;
   } 

   
   上面代码中，我们将每个列表项的float属性设置为left，同时添加了一个overflow:hidden属性来清除浮动（可以换成其他清除浮动的方式），也添加了一个margin-right属性来控制每个列表项之间的间距。
   三、使用Flexbox布局
   如果你使用的是CSS3，那么可以使用Flexbox布局来控制列表项的分布。Flexbox布局可以让我们更方便地控制排列方向、对齐方式、间距等属性。
   下面是示例代码：
   

   ul {
     list-style: none;
     display: flex;
     justify-content: space-between;
   }
   li {
     margin-right: 10px;
   } 

   
   上面代码中，我们将父元素的display属性设置为flex，这样它就可以作为Flex容器了。同时，我们将justify-content属性设置为space-between，表示让Flex项之间平分父元素的剩余空间，这样每个列表项就会均匀分布在父元素中了。
   以上是三种解决列表项叠在一起的方法，你可以根据需要选择其中一种或几种来实现自己想要的效果。