如何实现带蓝色左侧边框与项目符号的Div内容匹配设计图？

1. 给id为Audit的div添加蓝色左侧边框 #

直接在CSS中针对#Audit设置左侧边框样式，同时调整内边距避免内容紧贴边框：

#Audit {
  border-left: 4px solid #1677ff; /* 可根据设计图替换为对应蓝色值 */
  padding-left: 12px; /* 调整内容与边框的间距 */
}

2. 给循环追加的内容添加蓝色圆点项目符号 #

先给每个通过jQuery追加的内容块添加统一类名（比如audit-item），再用CSS伪元素实现蓝色圆点：

jQuery代码调整（追加时添加类名） #

// 示例循环逻辑，可根据你的实际数据结构修改
$.each(yourData, function(i, item) {
  $('#Audit').append('<div class="audit-item">' + item.content + '</div>');
});

对应CSS样式 #

.audit-item {
  position: relative;
  padding-left: 16px; /* 给圆点预留位置 */
  margin-bottom: 8px; /* 调整项之间的垂直间距 */
}

.audit-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1677ff; /* 与左侧边框蓝色保持统一 */
}

可选优化（用原生列表标签实现） #

如果你的追加内容适合用列表结构，也可以直接用<ul>+<li>实现：

#Audit ul {
  list-style: none;
  padding-left: 0;
}

#Audit li::before {
  /* 同上伪元素样式 */
}

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