Установка положения настраиваемых элементов управления ползунком (CSS) - PullRequest
Новая
       88

Установка положения настраиваемых элементов управления ползунком (CSS)

1 голос
/ 21 июня 2020

Я делаю свой аниме-сайт, где люди могут смотреть аниме бесплатно с субтитрами (болгарские субтитры, поскольку я из Болгарии). Теперь я переделываю его с нуля, потому что я использовал тему, но у нее не было особой функциональности ... Теперь я делаю слайдер для недавно добавленных аниме, но я хочу, чтобы он был индивидуальным, поэтому я m делает .... элементы управления ползунком не в позиции, поэтому я попробовал с помощью float, flex с float и т. д. c .... Вот изображение, которому оно должно принадлежать: щелкните, чтобы открыть изображение ( важно)

Вот 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!

1 Ответ

0 голосов
/ 21 июня 2020

justify-content: space-between; в классе title-controls решит проблему, показанную на изображении 

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