如何实现li元素不自动换行且保留原生项目符号

可行实现方案 #

方案1：调整HTML结构（最优，无兼容性问题，完全保留原生项目符号） #

原HTML结构不符合规范：<ul> 的直接子元素只能是 <li>，不能直接嵌套 <div>、<span> 等元素。你只需要把需要和最后一行列表同列的 <span> 放到最后一个 <li> 内部即可，不需要修改任何列表默认样式：

<ul class="c2">
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
  <li>
    line4
    <span>I want this in same line as line4</span>
  </li>
</ul>

这个方案完全保留原生项目符号，也不需要额外CSS适配，是首选方案。

方案2：使用inline-list-item属性（无需调整核心内容结构，原生保留项目符号） #

如果确实不能把span放入li内部，可以给最后一个 <li> 设置display: inline-list-item，这个属性值可以保留列表的原生项目符号，同时让元素不会独占整行，后续行内元素会自动跟在同一行：
修正后的合规HTML：

<ul class="c2">
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
  <li class="last-item">line4</li>
  <span>I want this in same line as line4</span>
</ul>

对应的CSS：

.last-item {
  display: inline-list-item;
  /* 可自定义右边距调整和后续span的间距 */
  margin-right: 4px;
}

方案3：老旧浏览器兼容方案 #

如果需要兼容不支持inline-list-item的旧版浏览器，可以通过伪元素模拟原生项目符号，同时把最后一个li设为行内元素：

.last-item {
  display: inline;
  /* 隐藏默认项目符号，用伪元素模拟 */
  list-style: none;
  position: relative;
  padding-left: 1.2em;
  margin-right: 4px;
}
.last-item::before {
  content: "•";
  position: absolute;
  left: 0;
  /* 调整符号样式匹配原生列表效果 */
  font-size: 1em;
  color: inherit;
}

这个方案模拟的项目符号和原生效果几乎完全一致，兼容性覆盖所有主流浏览器。

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