我一直在做我自己的动漫网站，在那里人们可以免费观看有字幕的动漫（保加利亚字幕，因为我来自保加利亚）。 现在我从零开始重做它，因为我一直在使用一个主题，但它没有太多的功能。。。 现在我正在为最近添加的动画制作滑块，但我希望它是一个自定义的，所以我制作。。。。 滑块控件不在位置上，所以我尝试用浮点，用浮点灵活等。。。 这里有一张应该属于它的图片:点击打开图片（重要）

以下是HTML:

        <div class="recent-anime">
      <!-- Title and Controls -->
      <div class="title-controls">
        <h1 class="title">Наскоро добавни</h1>
        <a><i class="fas fa-angle-left"></i></a>
        <a><i class="fas fa-angle-right"></i></a>
      </div>
      <!-- Anime cards -->
      <div class="animecards">

        <div class="animecard">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>  

      </div>
    </div>

和CSS:

.title-controls {
  display: flex;
  flex-direction: row;
  font-size: 42px;
  margin-bottom: 10px;
}
.title {
  font-size: 26px;
}

.animecards {
  display: flex;
}
.animecard {
  display: block;
  float: left;
}
.animecard img {
  max-height: 325px;
}
.ml {
  margin-left: 15px;
}
.ani {
  text-align: center;
}

没有JS。 仍然是HTML和CSS部分。 注意:这是干净的CSS！