如何将3个圆形div水平排成一行，无需硬编码边距且实现垂直居中

核心修改思路 #

• 调整DOM结构，把颜色圆点和说明文字放在同一级作为图例项的子元素，避免文字被限制在15px宽的圆点容器内
• 移除硬编码的margin-right，依靠flex布局的自动间距分配能力适配容器宽度变化
• 统一添加flex垂直居中配置，解决对齐问题

修改后的完整代码 #

HTML

<div class="footertext">
  <!-- 每个图例项单独作为flex子容器 -->
  <div class="legend-item">
    <div class="circlemarker" id="accactive"></div>
    <p>Active</p>
  </div>
  <div class="legend-item">
    <div class="circlemarker" id="accdisabled"></div>
    <p>Disabled</p>
  </div>
  <div class="legend-item">
    <div class="circlemarker" id="accprivileged"></div>
    <p>Privileged</p>
  </div>
</div>

CSS

.footertext {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 父容器整体垂直居中 */
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

/* 新增图例项样式，每个项内部也用flex布局 */
.legend-item {
  display: flex;
  align-items: center; /* 圆点和文字垂直居中对齐 */
  gap: 5px; /* 控制圆点和文字的间距，可自行调整 */
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker + p {
  margin: 0; /* 清除p标签默认外边距 */
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}

改动说明 #

1. 结构优化后，.footertext的justify-content: space-between会自动在三个图例项之间分配剩余空间，容器宽度变化时会自动调整间距，不需要固定边距
2. 两级flex的align-items: center分别保证了整体内容在父容器内垂直居中、每个图例的圆点和文字两两垂直居中
3. 圆点和文字的间距通过.legend-item的gap控制，和三个图例之间的间距完全解耦，调整更灵活

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