求助：基于CodePen代码搭建的表单项目符号重复问题排查

兄弟，我看你遇到了表单里<li>项目符号重复的问题，结合你给出的代码片段和这类问题的常见场景，大概率是下面几个原因导致的，咱们一个个捋清楚：

1. CSS默认样式与自定义符号冲突 #

你提供的CSS里给ul.items设置了定位样式，但没看到对列表项目符号的控制代码。浏览器默认会给<ul>元素添加list-style-type: disc（就是咱们常见的实心圆点），如果你的JS生成<li>时手动加了符号（比如•或者-），或者用CSS伪元素给<li>额外添加了符号，就会出现默认符号+自定义符号的重复叠加。

举两个典型的错误场景：

• JS手动添加符号的错误示例：

// 每次生成li都手动加了圆点，同时浏览器默认也会显示圆点
itemsList.innerHTML += '<li>• ' + itemContent + '</li>';

• CSS伪元素添加符号的错误示例：

ul.items li::before {
  content: '• ';
  /* 其他样式 */
}

解决办法很简单，给ul.items加上list-style: none;取消默认符号：

ul.items {
  position: absolute;
  width: 30px;
  height: ...;
  list-style: none; /* 新增这行，去掉默认项目符号 */
  padding-left: 0; /* 可选，移除浏览器默认的左内边距，让布局更整齐 */
}

2. JS重复生成列表项 #

如果你的JS代码在触发时没有先清空原有列表，而是反复追加<li>元素，也会看起来像是“项目符号重复”（本质是同一内容的列表项被生成了多次）。比如这种错误写法：

function generateItems() {
  const itemsList = document.querySelector('ul.items');
  // 没有清空原有内容，每次触发都追加新的li
  itemsList.innerHTML += '<li>Item 1</li>';
  itemsList.innerHTML += '<li>Item 2</li>';
}

解决办法是每次生成列表前先清空原有内容：

function generateItems() {
  const itemsList = document.querySelector('ul.items');
  itemsList.innerHTML = ''; // 先清空列表
  itemsList.innerHTML += '<li>Item 1</li>';
  itemsList.innerHTML += '<li>Item 2</li>';
}

3. 嵌套列表导致的符号叠加 #

如果你的ul.items里面不小心嵌套了另一个<ul>或<ol>，内层列表的默认符号会和外层的叠加，视觉上就像重复了。检查一下你的HTML结构，确保<li>内部没有嵌套其他列表元素，除非你是故意要做嵌套列表的样式。

结合你给的CSS片段，我觉得第一种情况（默认样式和自定义符号冲突）的概率最高，先试试给ul.items加上list-style: none;看看效果。如果还没解决，把JS生成列表的完整代码贴出来，咱们再进一步排查~

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