CSS圖像滑塊（圖像不保留在相同的位置）？

我爲我的網頁製作了一個小型CSS圖片滑塊，但我的圖片有一些問題（滑塊中的圖片）。屏幕上的圖像位置不同（儘管我已確保圖像在上載前尺寸相同）。CSS圖像滑塊（圖像不保留在相同的位置）？

滑塊的第一個圖像太高（因爲標題和圖像之間沒有間隙）。第二個圖像工作正常，第三個圖像低於第二個和第一個圖像？我的網頁可以在codepen.io可以看出（http://codepen.io/aaron_1986/pen/dGdqvx）

@keyframes slider { 

0% { 
    left: 0; 
    } 

20% { 
    left: 0; 
    } 

25% { 
    left: -100%; 
    } 

45% { 
    left: -100%; 
    } 

50% { 
    left: -200%; 
    } 

70% { 
    left: -200%; 
    } 

75% { 
    left: -300%; 
    } 

95% { 
    left: -300%; 
    } 

100% { 
    left: -400%; 
    } 
    } 

#slider { 
overflow: hidden; 
    } 

    #slider figure img { 
    width: 20%; 
    float: left; 
    } 

    #slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slider infinite; 

    } 
     }

來源

2016-01-26 jacob_1986

感謝您的幫助:)我可能會貪心，並問如何降低主圖像（所以圖像和標題之間存在差距）？此外，再次感謝你！ –

對不起，在您評論回來之前，請您對我發表評論。我剛剛爲你的'＃滑塊'div添加了一個邊距，這是你的意思嗎？：http://codepen.io/anon/pen/BjrOjN – alyssums

謝謝你的分數。該網頁是完美的！ –

我的猜測是仍然有list-style的<li>元素。它仍然不是很完美，但我加list-style: none你拿着圖像（我還調整圖像的寬度）<li>元素和它們保持對齊：codepen.io/anon/pen/gPejEJ

#slider figure li { 
list-style: none; 
} 
#slider figure img { 
width: 33.33%; 
float: left; 
}

來源

2016-01-26 19:13:01 alyssums

CSS圖像滑塊（圖像不保留在相同的位置）？

回答

相關問題