Was ist falsch an meinem Code? (Versuch, einen Schieberegler zu erstellen)

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; 
    } 

Das folgende Bild zeigt, dass das erste Bild gegen Ende abgeschnitten wird. Wie behebe ich das Problem? Das ist wirklich frustrierend und jede Hilfe wird sehr geschätzt!

Click here for Image!

Answer 1

Das Problem in Ihrem Beispiel-Code ist, dass die li nicht eine Breite hat. Bei Elementen vom Blocktyp ist die Breite normalerweise die Breite des übergeordneten Elements, aber bei schwebenden Elementen funktioniert das nicht.

Lösung: Geben Sie li eine Breite von 25%.

Außerdem vermute ich, dass Sie die Ränder überall entfernen möchten, also setze ich diese auch auf 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>