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

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>