CSS滑雪板向左移动

Question

我已经用css创建了一个滑块，但是当我到达最后一个元素时，它会移动到左侧。

​

/*Slider */

input[name="slider-select-element"] {
  display: none;
}
#slider-arrows {
  margin: -10% auto 0 auto;
  width: 80%;
}
#slider-box {
  height: 100%;
  width: 300%;
}
#slider-container {
  height: 250px;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  text-align: left;
}
.element-1,
.element-2,
.element-3 {
  min-height: 250px;
  max-height: 70%;
  width: 100%;
}
.element-1 {
  background-color: blue;
}
.element-2 {
  background-color: red;
}
.element-3 {
  background-color: green;
}
.slider-element {
  float: left;
  width: 33.333%
}
#element1:checked ~ #slider-arrows label:nth-child(2),
#element2:checked ~ #slider-arrows label:nth-child(3),
#element3:checked ~ #slider-arrows label:nth-child(1) {
  display: block;
  float: right;
}
#element1:checked ~ #slider-arrows label:nth-child(3),
#element2:checked ~ #slider-arrows label:nth-child(1),
#element3:checked ~ #slider-arrows label:nth-child(2) {
  display: block;
  float: left;
}
#element1:checked ~ #slider-arrows label:nth-child(2):before,
#element2:checked ~ #slider-arrows label:nth-child(3):before,
#element3:checked ~ #slider-arrows label:nth-child(1):before {
  color: black;
  content: "\f054";
  line-height: 1;
  font-family: FontAwesome;
}
#element1:checked ~ #slider-arrows label:nth-child(3):before,
#element2:checked ~ #slider-arrows label:nth-child(1):before,
#element3:checked ~ #slider-arrows label:nth-child(2):before {
  color: black;
  content: "\f053";
  line-height: 1;
  font-family: FontAwesome;
}
#element1:checked ~ #slider-container #slider-box {
  margin-left: 0;
}
#element2:checked ~ #slider-container #slider-box {
  margin-left: -100%;
}
#element3:checked ~ #slider-container #slider-box {
  margin-left: -200%;
}
#slider-arrows label {
  color: transparent;
  cursor: pointer;
  display: none;
  font-size: 2rem;
  height: 20px;
  width: 20px;
}
#slider-box {
  /*chrome y safari */
  -webkit-transition: all 0.75s ease;
  /*mozilla */
  -moz-transition: all 0.75s ease;
  /* I explorer */
  -ms-transition: all 0.75s ease;
  /*Opera*/
  -o-transition: all 0.75s ease;
  transition: all 0.75s ease;
}

<!-- Slider -->
<section>

  <!-- Controles -->
  <input type="radio" name="slider-select-element" id="element1" checked="checked" />
  <input type="radio" name="slider-select-element" id="element2" />
  <input type="radio" name="slider-select-element" id="element3" />
  <!-- Terminan Controles -->

  <div id="slider-container">
    <div id="slider-box">
      <div class="slider-element">
        <article class="element-1">

        </article>
      </div>
      <div class="slider-element">
        <article class="element-2">

        </article>
      </div>
      <div class="slider-element">
        <article class="element-3">

        </article>
      </div>
    </div>
  </div>

  <div id="slider-arrows">
    <label for="element1"></label>
    <label for="element2"></label>
    <label for="element3"></label>
  </div>

</section>

​

我找到了两个解决方案，但我不知道它们是否是正确的解决方案。

1.-向.slider-container中添加一个margin-left: 10%。

2.-将position:relavite添加到<section>，将position:absolute margin-left:10%添加到slider-arrow。

我遗漏了什么？

Answer 1

经过一番周旋之后，我会接受你的第一个建议。这是小提琴。

我基本上改变了这句话：

margin: 0 auto;

对此：

margin: 0 auto auto 10%;

这只会确保在滑块容器和页面左侧之间有10%的宽度。如果您的滑块容器宽度将是80%，这是合理的，每边有10%的宽度，假设它是居中。因此，一切都会井井有条。不需要调整位置。