Поместите значки на правый конец аккордеона

Я сделал следующий складной аккордеон с использованием фреймворка Materialize css.

Я пытаюсь разместить значки шевронов в конце сворачиваемого заголовка. Я применил класс css правильно, чтобы значок перемещался в правом конце сворачиваемого заголовка, но это не делает его полным правым концом сворачиваемого заголовка.

Как лучше всего переместить значок шеврона в крайнее правое положение складного заголовка?

 $('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet"/>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <ul class = "collapsible">
    <li>
      <div class = "collapsible-header">
      
      First
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Second
      <i class = "material-icons rotate right">expand_more</i>
      </div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Third
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

html css materialize

30.10.2018 09:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 429

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

сделай это абсолютным

.collapsible-header i {

    position: absolute;
    right: 0px;
}

$('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header i {
    
    position: absolute;
    right: 0px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet"/>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <ul class = "collapsible">
    <li>
      <div class = "collapsible-header">
      
      First
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Second
      <i class = "material-icons rotate right">expand_more</i>
      </div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Third
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

30.10.2018 09:55

Поскольку в вашем div.collapsible-header уже есть display:flex, вы можете добавить justify-content: space-between. Это сделает ...

the first item is flush with the main-start edge, and the last item is flush with the main-end edge.

обосновать содержание

$('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header {
  justify-content: space-between;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet" />
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<ul class = "collapsible">
  <li>
    <div class = "collapsible-header">

      First
      <i class = "material-icons rotate right">expand_more</i></div>
    <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class = "collapsible-header">Second
      <i class = "material-icons rotate right">expand_more</i>
    </div>
    <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class = "collapsible-header">Third
      <i class = "material-icons rotate right">expand_more</i></div>
    <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

Хороший ответ

— 30.10.2018 10:11

30.10.2018 09:56

Добавьте "justify-content: space-between"; в класс 'складной заголовок'.

 $('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}
.collapsible-header {
  justify-content: space-between;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet"/>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <ul class = "collapsible">
    <li>
      <div class = "collapsible-header">
      
      First
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Second
      <i class = "material-icons rotate right">expand_more</i>
      </div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header">Third
      <i class = "material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

Я думаю, это как ответ @ksav?

— 30.10.2018 10:10

Да, я одновременно добавил и ответ. После этого он внес некоторые правки.

— 30.10.2018 10:17

30.10.2018 09:57

Также вы можете использовать row и col (сетчатую структуру) следующим образом:

$('.collapsible').collapsible();

.collapsible li.active i {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
.rotate {
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}

.collapsible-header.row {
  margin-bottom: 0;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel = "stylesheet"/>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <ul class = "collapsible">
    <li>
      <div class = "collapsible-header row">
      
      <div class = "col s11">First</div>
      <i class = "col s1 material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header row"><div class = "col s11">Second</div>
      <i class = "col s1 material-icons rotate right">expand_more</i>
      </div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class = "collapsible-header row"><div class = "col s11">Third</div>
      <i class = "col s1 material-icons rotate right">expand_more</i></div>
      <div class = "collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

30.10.2018 10:03

Я только что добавил "display: block" в сворачиваемый заголовок, и он работал нормально ...

.collapsible-header{
    display: block;
}

и добавьте только правильный класс к значку материала. это будет работать

05.01.2021 16:13

Другие вопросы по теме

Хром оставляет лишнее пространство после преобразования css

Социальные иконки в нижнем колонтитуле с текстом

Как использовать calc () в svg stroke-dasharray

Модальные тени Bootstrap отображаются на модальных окнах

Использование цикла для div и значения данных в Laravel

Подергивание анимации jQuery при использовании свойства преобразования CSS

Как установить размер ячейки по каждому столбцу с помощью jspdf?

Изображение не реагирует и переполняет контейнер в Wordpress

Justify-content и align-items не работают должным образом при использовании dispaly: flex

Настройка слайдера карусели совы

Поместите значки на правый конец аккордеона

Ответы 5

Другие вопросы по теме

Похожие вопросы