Accordion内列表项圆点不显示问题求助及修复方案咨询

这问题大多是CSS样式被覆盖或者全局重置导致的，给你几个直接可行的修复方案：

方案1：给Accordion内的列表单独设置样式 #

在你的CSS里添加以下代码，强制恢复列表的圆点样式和内边距：

/* 针对Accordion下的列表 */
.accordion .content ul {
  list-style-type: disc; /* 启用圆点标识 */
  padding-left: 1.5em; /* 给圆点留出显示空间，避免被挤到容器外 */
}

方案2：排查全局样式重置的影响 #

如果你的项目里用了类似这样的全局重置代码：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

那会把所有列表的默认样式都清掉，这时候除了方案1的代码，也可以单独给这个列表项的父容器调整样式，确保内边距足够让圆点显示。

方案3：检查父元素的溢出隐藏设置 #

如果Accordion的某个父元素设置了overflow: hidden，也可能导致列表圆点被裁剪，这时候需要给该父元素添加足够的padding-left，或者移除不必要的overflow设置。

你的原始HTML代码： #

<section id="Specialist">
            <div class="services-container">
              <div class="left1">
                <div class="content">
                  <h1>Specialist  Services</h1>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et undevoluptatem</p>
                  <div class="accordion">
                    <div class="contentAB">
                      <div class="label">Specialist  Services</div>
                      <div class="content">
                        <ul>
                          <li>Fixed Term Contracts (Ad-Hoc).</li>
                          <li>Technical and project cost audits.</li>
                          <li>“Watching Brief” on EPCM and turnkey projects.</li>
                          <li>Mediation and dispute resolution.</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <div class="right1"></div>
            </div>
          </section>

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