[分享]css列表子列表不会换行

在Web开发中，我们经常需要使用列表来展示一些信息。而当我们在列表中嵌套子列表时，经常会遇到子列表不会换行的问题。这时候，就需要使用CSS来解决。ul { padding: 0; margin: 0;...

在Web开发中，我们经常需要使用列表来展示一些信息。而当我们在列表中嵌套子列表时，经常会遇到子列表不会换行的问题。这时候，就需要使用CSS来解决。

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li {
  line-height: 1.5;
  padding: 10px;
  background-color: #f5f5f5;
}
ul li ul {
  margin-left: 20px;
} 

在上面的代码中，我们首先对ul和li标签进行了样式设置，其中list-style属性设置为none可以去除列表默认样式。接着，我们针对ul li ul（也就是子列表）设置了一个左边距，这样就可以使子列表在父级列表项的下一行显示。

需要特别注意的是，如果想要子列表显示在正确的位置，还需要针对子列表中的li标签设置一些样式。例如：

ul li ul li {
  line-height: 1.5; 
  padding: 0; 
  background-color: transparent;
} 

在上面的代码中，我们通过设置子列表中的li标签的background-color为transparent，将子列表项的背景颜色去掉。同时，我们还设置了子列表项的padding为0，使得子列表项之间没有任何间距。

通过上述CSS样式设置，我们可以轻松地解决CSS列表子列表不会换行的问题。