Question

我无法让我的ul显示多张图片。我尝试过使用不同的东西，比如使用类和id而不是ul：nth-child（）。我不能为我的生活弄清楚我做了什么让它表现得像这样。是我的CSS还是我的HTML中的问题？

＆＃13;

.container {
  width: 100%;
  height: 200px;
  background: #505050;
  position: fixed;
  margin: 0;
  padding: 0;
  bottom: 0px;
  left: 0;
}
.container ul {
  position: relative;
  margin: 0;
  padding: 0;
}
.container li {
  width: 300px;
  height: 200px;
  position: absolute;
  list-style: none;
}
.container ul:nth-child(1) {
  animation: cycleOne 10s linear infinite;
}
.container ul:nth-child(2) {
  animation: cycleTwo 10s linear infinite;
}
.container ul:nth-child(3) {
  animation: cycleThree 10s linear infinite;
}
.container ul:nth-child(4) {
  animation: cycleFour 10s linear infinite;
}
.container ul:nth-child(5) {
  animation: cycleFive 10s linear infinite;
}
.container ul:nth-child(6) {
  animation: cycleSix 10s linear infinite;
}
.container ul:nth-child(7) {
  animation: cycleSeven 10s linear infinite;
}
@keyframes cycleOne {
  0% {
    left: 500px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleTwo {
  0% {
    left: 1800px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleThree {
  0% {
    left: 1500px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleFour {
  0% {
    left: 1200px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleFive {
  0% {
    left: 900px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleSix {
  0% {
    left: 600px;
  }
  100% {
    left: -300px;
  }
}
@keyframes cycleSeven {
  0% {
    left: 300px;
  }
  100% {
    left: -300px;
  }
}

＆＃13;

<div class="container">
  <ul>
    <li>
      <a href="1.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="2.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="3.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="4.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="5.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="6.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
    <li>
      <a href="7.html">
        <img height="200px" width="300px" src="images/kitty.jpg">
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

您似乎正在使用.container ul:nth-child(x)

定位错误的元素

将每个.container ul li:nth-child(x)更改为git remote add origin url://to/source/repository

ul图像只显示第一个孩子

1 个答案: