私のコードで何が問題になっていますか？ （スライダを作成しようとしています）

Question

// Html 

<div class="hero"> 
    <ul> 
    <li><img src="images/wallpaper.jpg"/></li> 
    <li><img src="images/wallpaperTwo.jpg"/></li> 
    <li><img src="images/wallpaperThree.jpg"/></li> 
    <li><img src="images/wallpaperFour.jpg"/></li> 
    </ul> 
</div> 

// Css 

.hero { 
    position: relative; 
    top:0; 
    left:0; 
} 

.hero ul { 
width:400%; 
display:block; 
} 

.hero ul li { 
float:left; 
} 

.hero ul li img { 
    width:100%; 
    display:block; 
    height:94vh; 
    } 

次の図は、最初の画像が最後に切り取られていることを示しています。どのようにして問題を解決できますか？これは本当にイライラしているので、どんな助けも大歓迎です！

Click here for Image!

Answer 1

あなたの例のコードに問題がliは幅を持っていないということです。通常、ブロックタイプの要素では、幅は親の幅になりますが、浮動要素では動作しません。

解決策：liの幅を25％にします。

また、どこに余白を残しておきたいのではないかと思うので、それらも0に設定します。助けのための

html, body { 
 
    margin: 0; 
 
} 
 
.hero ul { 
 
    margin: 0; padding: 0; 
 
    width: 400%; 
 
} 
 
.hero ul li { 
 
    float: left; 
 
    margin: 0; padding: 0; 
 
    list-style: none; 
 
    width: 25%; 
 
} 
 
.hero ul li img { 
 
    width: 100%; 
 
    display: block; 
 
    height: 94vh; 
 
}

<div class="hero"> 
 
    <ul> 
 
    <li><img src="http://lorempixel.com/500/500" /></li> 
 
    <li><img src="http://lorempixel.com/g/500/500" /></li> 
 
    <li><img src="http://lorempixel.com/500/500" /></li> 
 
    <li><img src="http://lorempixel.com/g/500/500" /></li> 
 
    </ul> 
 
</div>