如何实现幻灯片导航Dot元素的X轴左右移动？

你的问题出在float:right和父容器text-align:center的属性冲突，加上margin的左右值设置过小，导致无法正常控制Dot的左右位置。以下是几种可行的解决方案：

方案一：移除float，通过margin或父容器控制位置 #

这是最简洁的方案，适合大多数场景：

1. 先移除.dot的float:right属性，它会和父容器的text-align:center互相干扰：

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 230px 10px; /* 增大左右margin，调整Dot之间的间距 */
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  /* 删除 float:right */
}

.active,
.dot:hover {
  background-color: #717171;
}

2. 若要整体调整所有Dot的左右位置，给父容器添加margin或padding：

<div style="text-align: center; margin-left: 60px;"> <!-- 整体右移60px，负数则左移 -->
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>

方案二：用绝对定位实现精准控制 #

如果需要更灵活的位置调整（比如固定在幻灯片底部某个位置），可以用相对+绝对定位：

1. 修改CSS，给父容器设置相对定位，Dot用绝对定位：

.dot-container {
  position: relative;
  height: 500px; /* 高度和你的幻灯片保持一致 */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  bottom: 30px; /* 距离底部的距离，替代原来的margin-top */
  left: 50%; /* 先让Dot容器居中 */
  transform: translateX(-50%); /* 精准居中，调整数值可整体左右移动 */
}

.active,
.dot:hover {
  background-color: #717171;
}

2. 对应修改HTML结构：

<div class="dot-container">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>

如果要单独调整某个Dot的位置，直接给它加行内样式：

<div class="dot" onclick="currentSlide(1)" style="left: 48%;"></div>

方案三：保留float的调整方式 #

如果一定要保留float:right，需要删掉父容器的text-align:center，通过父容器的padding控制整体位置：

.dot-wrapper {
  padding-right: 120px; /* 调整此值控制Dot整体的左右位置 */
  overflow: hidden; /* 清除浮动影响 */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 230px 8px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  float: right;
}

.active,
.dot:hover {
  background-color: #717171;
}

<div class="dot-wrapper">
  <div class="dot" onclick="currentSlide(1)"></div>
  <div class="dot" onclick="currentSlide(2)"></div>
  <div class="dot" onclick="currentSlide(3)"></div>
</div>

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