如何动态定位元素实现轮播容器宽度自适应且不改动原有HTML结构？

原生CSS没有提供「将元素移出原有文档流、并入其他独立布局流参与尺寸计算」的原生能力。你当前方案需要手动写死宽度的核心原因，是设置了position: absolute的.carousel-bullets完全脱离正常文档流，根本不会被.carousal-arrows容器的宽度计算逻辑纳入，自然没法实现指示器数量变化时的宽度自适应。

不需要调整现有DOM结构，仅替换CSS即可实现你要的效果，核心是利用CSS Grid同层元素重叠布局的特性，让两个兄弟节点共同参与容器宽度计算：

/* 你可以把下面的选择器替换为你实际使用的轮播外层容器类名 */
.carousel-outer {
  display: grid;
  place-items: center;
}

.carousal-arrows {
  /* 移除原有写死的 width: 150px 配置 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-area: 1/1;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

.carousel-bullets {
  display: flex;
  pointer-events: none;
  list-style-type: none;
  grid-area: 1/1;
  /* 移除原有 position: absolute、top: 0、width: 100px 配置 */
  background-color: red;
  z-index: 1;
}

.carousel-bullets .carousel-bullet {
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin-inline: 4px;
}

方案特性 #

• 完全保留原有HTML结构，没有新增、移动任何DOM节点
• 无任何硬编码宽度值，轮播指示器数量增减时，容器会自动计算总宽度，箭头会始终位于指示器两侧，不会出现覆盖问题
• 指示器天然居中在两个箭头之间，不需要手动计算top、left偏移值
• 保留pointer-events: none配置，指示器不会拦截箭头按钮的点击事件

如果需要兼容IE这类不支持CSS Grid的老旧浏览器，可以补充几行JS，监听指示器列表的宽度变化，动态给.carousal-arrows设置左右内边距即可，优先推荐上述纯CSS方案，性能更好维护成本更低。

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