自定义滑块控件的设置位置 (CSS)

Question

我一直在制作我的动漫网站，人们可以在那里免费观看带有字幕的动漫（保加利亚语字幕，因为我来自保加利亚）。现在我正在从头开始重新制作它，因为我一直在使用一个主题，但它没有太多功能......现在我正在为最近添加的动画制作滑块，但我希望它是一个自定义的，所以我' m making....滑块控件不在某个位置，所以我尝试使用 float、flex 和 float 等...这是它应该属于的图片：click to open the image (important)

这是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!

Answer 1

justify-content: space-between; title-controls class 将解决图中显示的问题

.title-controls {
  display: flex;
  flex-direction: row;
  font-size: 42px;
  margin-bottom: 10px;
  justify-content: space-between;
}

自定义滑块控件的设置位置 (CSS)

Setting position of custom slider controls (CSS)

html

css

web

frontend

w3c