使用list-style-type:none移除列表符号后如何保证每个列表项单独占一行

问题原因 #

你遇到的列表项挤行问题，本质是<li>元素的布局属性设置问题：
默认<li>是display: list-item的块级特性，会独占一行，你现在的表现说明你给<li>额外设置了float: left/right或者display: inline/inline-block属性：

• 浮动元素会脱离正常文档流，只要父容器剩余宽度足够，多个短内容的浮动li就会排在同一行，只有当单个li内容长度超过父容器宽度时，才会单独换行
• 行内/行内块元素本身就支持同排行显示，宽度足够时不会自动换行

你贴出的CSS只配置了ul的基础样式，没有限制li的布局行为，才会出现这个异常。

修复方案 #

根据你的实际需求选择对应方案即可：

方案1：所有列表项独占一行（普通列表场景最常用） #

给li加以下样式即可：

li {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  box-sizing: border-box;
}

方案2：需要多列并排且无错位 #

如果是要做多列排列的列表，推荐用flex布局避免浮动带来的错位问题：

ul {
  display: flex;
  flex-wrap: wrap;
  /* 可选：调整列间距 */
  gap: 8px 16px;
}
li {
  /* 按需要的列数调整宽度，比如3列就是33.33%，减去gap的宽度即可 */
  flex: 0 0 calc(33.33% - 16px);
  box-sizing: border-box;
}

如果一定要用浮动实现，给ul加清除浮动的配置即可：

ul::after {
  content: "";
  display: block;
  clear: both;
}
li {
  float: left;
  /* 按列数设置固定宽度 */
  width: 33.33%;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Joquantinbalow