1
我用css創建了一個滑塊，但是當我到達最後一個元素時，它會移動到左側。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 a margin-left: 10%。
2，添加position:relavite到<section>和position:absolutemargin-left:10%到slider-arrow。
我缺少什麼？