如何实现li元素结束后不自动换行且保留列表项目符号

首先修正HTML规范问题 #

ul 标签的直接子元素只能是 li，你原有代码中将div、span作为ul的直接子元素、将li嵌套在span内的写法不符合HTML语法规范，会导致列表渲染异常，需要先调整结构。

可行实现方案 #

你需要保留列表项目符号，只要不修改li的默认display: list-item属性即可，针对你需要「前3个列表项独占一行，第4个列表项和后续文本同行」的需求，调整浮动规则即可实现：

1. CSS代码

li {
  float: left;
  /* 确保项目符号跟随li内容浮动，不会出现排版错位 */
  list-style-position: inside;
}
/* 仅给非最后一个li添加清除浮动属性，保证前3个li独占一行 */
li:not(:last-child) {
  clear: left;
}
.tip-text {
  float: left;
  margin-left: 8px; /* 可自行调整文本和列表项的间距 */
}

2. 修正后的HTML代码

<ul class="c2">
  <li>line1</li>
  <li>line2</li>
  <li>line3</li>
  <li>line4</li>
  <span class="tip-text">我希望这段内容和line4在同一行展示</span>
</ul>

扩展：如果需要所有li都横向同行排列 #

如果你的需求是所有列表项都在同一行展示、同时保留项目符号，可以用flex布局实现，更易维护：

ul {
  display: flex;
  gap: 16px; /* 控制li之间的间距 */
  padding-left: 0;
}
li {
  list-style-position: inside;
}

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