我的代码出了什么问题？ （尝试创建滑块）

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>