Последовательность li

Тема в разделе "Верстка", создана пользователем runyugin, 10 апр 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. runyugin

    runyugin Постоялец

    Регистр.:
    30 июн 2013
    Сообщения:
    54
    Симпатии:
    4
    Есть динамически формирующийся слисок из li,

    HTML:
    
    <ul>
          <li></li>
          <li></li>
          <li></li> 
          <li></li>
          <li></li>
          <li></li>
          <li></li> 
          <li></li>
    </ul>
    как можно менять последовательность выводимых li
     
    FUTURiTY нравится это.
  2. puagardian

    puagardian One Love

    Moderator
    Регистр.:
    16 июл 2012
    Сообщения:
    433
    Симпатии:
    559
    Последнее редактирование: 10 апр 2015
    FUTURiTY и ultra нравится это.
  3. BaNru

    BaNru Постоялец

    Регистр.:
    20 ноя 2008
    Сообщения:
    126
    Симпатии:
    52
    Если не имеет значение кроссбраузерность, а необходима поддержка только современных браузеров, то можно использовать модель FLEXBOX + выше озвученные nth-child (или лучше nth-of-type).

    пример

    Также, можно использовать инлайновые стили, если это генерируется на ходу
    Код:
    <li style="order: 3">8</li>
    Ссылки по теме:
    w3.org: CSS Flexible Box Layout Module Level 1 (правильно наверное назвать "рабочий" черновик от 25 September 2014)
    dev.w3.org: CSS Flexible Box Layout Module Level 1 (последний черновик от 2 March 2015)
    A Complete Guide to Flexbox на css-tricks.com (очень хороший мануал на английском)
    Ну и в гугле ещё полно материала, в том числе и на русском.

    Поддержка браузерами
    [​IMG]
    http://caniuse.com/#search=flex

    Сообщения потерлись. Похоже где-то тут произошел серьезный откат БД.
    Сообщение всё своё переписывать не будут, скажу лишь коротко

    :nth-child или лучше :nth-of-type + FLEXBOX
    http://jsfiddle.net/BaNru/z3mq4LdL/
     
    Последнее редактирование модератором: 13 май 2015
    FUTURiTY нравится это.
Статус темы:
Закрыта.