Пропустить нумерацию списка заказанного списка

17

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

Традиционный вывод:

1. List item
2. List item
3. List item
4. List item
5. List item

Требуемый вывод:

1. List item
2. List item
   Skipped list item
3. List item
4. List item
5. List item

Насколько это возможно в CSS? Я обнаружил <ol> "start" атрибут , о котором я раньше не знал, но не кажется чтобы помочь мне.

    
задан AlecRust 12.10.2012 в 13:31
источник
  • Вы действительно хотите пропустить этот элемент, или он больше похож на ребенка или дополнительную строку элемента перед этим? –  John Watts 12.10.2012 в 13:36
  • Да, я просто хочу пропустить этот элемент, но сохранить остальную часть нумерации. Это список треков, который можно разделить на несколько разделов на одном диске. Номера треков должны игнорировать названия разделов. Я не могу создавать отдельные разделы с отдельными списками, поскольку нумерация предназначена для дорожек на диске, а не для каждого раздела. Дайте мне знать, если это не ясно, и вам нужна скрипка. –  AlecRust 12.10.2012 в 13:44

4 ответа

17

Другой вариант - использовать счетчики CSS3: демо

HTML

<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>​

CSS

ul {
    counter-reset:yourCounter;
}
ul li:not(.skip) {
    counter-increment:yourCounter;
    list-style:none;
}
ul li:not(.skip):before {
    content:counter(yourCounter) ".";
}
ul li.skip:before {
    content:"\a0\a0\a0"; /* some white-space... optional */
}
    
ответ дан Giona 12.10.2012 в 13:38
источник
  • Yup, я думал, что это решение может быть всем возможным. Хорошая статья о 456 улице Береа об этом. Спасибо за демо! –  AlecRust 12.10.2012 в 13:55
  • Это приводит к неудачному побочному эффекту превращения всех элементов <ul> в <ol>. –  FKEinternet 30.10.2017 в 04:34
24

Самый простой способ - удалить маркер списка из элемента, который нужно пропустить, и установить номер следующего элемента с помощью атрибут value (который не будет устаревшим / устаревшим в HTML5). Пример:

<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>
    
ответ дан Jukka K. Korpela 12.10.2012 в 15:25
источник
  • Очень интересно. Похоже, у этого есть хорошая поддержка браузера. Не могу придумать какой-нибудь нисходящий ... наверняка там должен быть один ?! –  AlecRust 12.10.2012 в 16:05
  • Единственный недостаток, который я вижу, - это атрибут «значение» при динамическом создании. Было бы хорошо, если бы все обрабатывались в CSS (кроме класса «skip»), как предыдущее решение. –  AlecRust 12.10.2012 в 16:38
  • Используется только сейчас. Работал как шарм! –  Dan 25.01.2013 в 23:31
  • хорошо, но не нравится, как вам нужно добавить значение = 3, чтобы установить / исправить счет. jsfiddle.net/1vew6e61 –  HattrickNZ 11.07.2017 в 05:44
  • XHTML Строгая проверка жалуется, что нет атрибута «значение» :( –  FKEinternet 30.10.2017 в 04:37
3

Это довольно просто.

Просто добавьте следующее в класс .skip с .skip, который используется для пропущенного списка:

ol li.skip {
    list-style-type:none;
    counter-increment:none;
}

в HTML это будет:

<ol>
  <li>first list item</li>
  <li class="skip">2nd list item</li>
  <li>third list item</li>
</ol>

в результате:

  1. первый элемент списка и элемент 2-го списка
  2. третий элемент списка
ответ дан Dennis Kraut 21.10.2016 в 12:15
источник
  • Добавьте пример здесь, чтобы уточнить –  Black Mamba 10.01.2017 в 18:27
  • Надеюсь, что он достаточно проработан –  Dennis Kraut 11.01.2017 в 19:52
  • Брат Yup, пользователю не придется тестировать сам скрипт, и теперь он может реализовать его напрямую :) –  Black Mamba 14.01.2017 в 14:50
  • Не работает, он показывает другой результат ir show 1,3. это решение неверно –  user2936008 05.04.2017 в 22:01
  • работал для меня и, возможно, лучше / короче, чем Giona выше jsfiddle.net/xuv342xb –  HattrickNZ 11.07.2017 в 05:41
Показать остальные комментарии
1

Это мое решение (только с CSS), которое позволяет вам поддерживать нормальное использование li (list-item) из ol (упорядоченный список). Это означает, что все элементы li являются обязательными, и нет элемента, который не представляет собой то же, что и его сосед.

Код ниже:

 .term-and-condition li {
    position: relative;
  }
  .term-and-condition ol ol {
    list-style-type: lower-latin;
  }
  .term-and-condition h2 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h3 {
    position: absolute;
    top: -2.4em;
    left: -1.5em;
  }
  .term-and-condition h2 + *,
  .term-and-condition h3 + * {
    margin-top: 4em;
  }
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Skip ordered list item numbering</title>
  </head>
  <body>
    <article class="term-and-condition">
      <h1>Participants agree to be bound by these Terms and Conditions</h1>
      <ol>
        <li>
          <h2>The Promoter</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> 

        <li>
          <h2>Eligibility</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li>
          <h2>Entry</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
        </li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>

        <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li>

        <li>
          <p>Entrants must upload an image and text that:</p>
          <ol>
            <li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li>
            <li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li>
            <li><p>in amet libero magnam consectetur facere,</p></li>
            <li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
            <li>
              <h3>Additional requirements</h3>
              <p>All entries must be the participant’s own image or have the relevant permission</p>
            </li>
            <li><p>The entrant must be the lorem</p></li>
          </ol>
        </li>
        <li>
        <h2>Winner Selection</h2> 
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p>
        </li>
      </ol>
    </article>
  </body>
</html>

- Смотрите Codepen

    
ответ дан Bruno Lesieur 16.10.2014 в 17:42
источник
  • Я бы не предпочел это решение, так как он слишком много работал, когда дело доходило до отзывчивого дизайна или при использовании бутстрапа (изменение верхнего и левого полей / отступов) –  user2936008 05.04.2017 в 22:05
  • Это неверно. Это полностью отзывчивое и совместимое с использованием Bootsrap. –  Bruno Lesieur 13.07.2017 в 15:33