li设置display:inline后list-style-type列表符号失效原因咨询

列表符号消失的本质是display属性修改后，元素的盒模型类型发生变化，导致承载符号的标记盒不再生成：

• 浏览器默认给<li>标签配置的用户代理样式为display: list-item，这个特殊的display值会在元素常规的内容盒之外，额外生成一个独立的标记盒（marker box），我们看到的圆点、序号、自定义列表符号全部渲染在这个标记盒中，list-style-type、list-style-position等属性也都是作用在这个标记盒上。
• 当手动给<li>设置display: inline时，元素的盒类型从列表项盒切换为普通行内盒，按照CSS渲染规范，此时标记盒会被直接销毁，不参与布局和渲染。
• 标记盒不存在的前提下，后续不管是修改list-style-type属性，还是给元素加margin、padding，都不可能凭空生成已经被移除的标记盒，自然无法让列表符号显示。

不要通过把<li>改为行内元素实现横向排列，两种符合规范的实现方式：

• 方案1：Flex布局（推荐）
  给父级<ul>设置display: flex实现横向排列，保留<li>默认的list-item盒类型，即可正常显示列表符号，参考代码：

  <html>
  <head>
  <style>
    ul {
      display: flex;
      gap: 2rem; /* 控制列表项间距 */
      padding-left: 1.5rem; /* 预留标记盒的显示空间 */
    }
    li {
      list-style-type: circle;
    }
  </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
  </html>
  

• 方案2：浮动布局
  保留<li>的display: list-item属性，给<li>设置float: left实现横向排列，同时给父级<ul>清除浮动、预留左侧内边距即可，这种写法需要手动处理浮动带来的高度塌陷问题，目前已经不推荐使用。

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