使用display:inline实现li横向排列时项目符号隐藏如何解决

你遇到的项目符号消失问题，本质是 <li> 元素默认的 display: list-item 属性被覆盖导致的：只有display属性为list-item的元素，才会自动渲染列表标记（也就是你说的项目符号），设置display: inline后会丢失该特性。

以下是三种可直接落地的修复方案：

方案1：使用Flex布局（最推荐） #

Flex是目前实现横向列表的最优方案，不需要修改<li>的默认display属性，天然保留项目符号，还能灵活控制间距和对齐：

/* 去掉原代码里给li设置的display: inline规则，替换为以下样式 */
.list-inline {
  /* 按需调整ul的左内边距，控制项目符号的缩进 */
  padding-left: 20px;
  display: flex;
  /* 控制列表项之间的间距，代替原li的margin属性 */
  gap: 10px;
  /* 如果列表项过多需要自动折行，可以加flex-wrap: wrap */
}

方案2：伪元素手动实现项目符号 #

如果需要保留display: inline的写法，可以通过伪元素手动添加项目符号，还能自定义符号样式：

.list-inline li {
  margin: 10px;
  display: inline;
}
/* 给每个li前面加圆点项目符号 */
.list-inline li::before {
  content: "•";
  /* 调整符号和文字的间距 */
  margin-right: 4px;
}

方案3：inline-block兼容方案 #

如果是需要兼容旧浏览器的场景，可以把display: inline改成inline-block，配合列表样式属性恢复项目符号：

.list-inline li {
  margin: 10px;
  display: inline-block;
  /* 开启项目符号 */
  list-style-type: disc;
  /* 把项目符号渲染在li盒子内部，避免被父元素裁切掉 */
  list-style-position: inside;
}

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