我如何在选取框中将照片连同它们下面的无序列表一起制作

Question

如标题中所述，我正在尝试找到一种方法来在像这样的选取框内添加带有无序列表的图片 example。这就是我目前拥有的

<HTML>
<body>
<marquee>
<div>
<img src="img">
    <span class="caption"><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></span>
</div>
<div>
<img src="img">
    <span class="caption"><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul></span>
</div>
</marquee>
</body>
</html>

Answer 1

由于 marquee 标签已被弃用，此代码段使用的方法略有不同。

它有每个选取框项目的两个副本，并将它们放置在一个容器中，该容器是一个水平网格，占据容器宽度的两倍（在本例中为视口）。

通过这种方式，我们可以将容器向左移动 50%，然后重复动画 - 容器的第二部分将 'replaced' 移动到第一部分，并且移动将是连续的。

必须修复的第二件事是在 span 中有一个 ul。相反，跨度变成了 div.

<HTML>

<head>
  <title>Banner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .banner {
      width: 200vw;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      position: absolute;
      top: 0;
      left: 0;
      animation: move infinite 6s linear;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
    .banner>* {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .banner img {
      width: 10vh;
      height: 10vh;
      object-fit: cover;
    }
    
    .caption ul {
      padding-inline-start: 0;
    }
    
    .
  </style>
</head>

<body>
  <div class="banner">
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1015/200/300">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
    <div>
      <img src="https://picsum.photos/id/1016/300/200">
      <div class="caption">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>

我如何在选取框中将照片连同它们下面的无序列表一起制作

How do i make pictures next together with unordered list under them in a marquee

html

css

image

html-lists

marquee