我的代码有什么问题？ （试图创建一个滑块）

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>