Пользовательский счетчик для ол - PullRequest
Новая
       3

Пользовательский счетчик для ол

0 голосов
/ 02 мая 2020

Изменение счетчика в ol / li известно * Уловка 1014 * со многими ссылками, такими как эта .

Я использую этот прием, чтобы иметь несколько элементов <ol> с одним и тем же счетчиком , Я также хочу иметь правильные поля для многострочного текста. Для этого предлагается использовать ::marker, как в примере ниже (использование ::before делает числа частью абзаца, а не на полях). Это хорошо работает в Firefox, но только Firefox. Не на моем iPhone и не на Chrome (как объяснено здесь ).

Есть ли лучшее решение, которое работает во всех браузерах? 

 <!DOCTYPE html>
<html>
<head>
  <style>

    div.one-counter {
        counter-reset: bibitem;
    }

    div.one-counter ol{
        max-width: 200px;
    }

    div.one-counter ol li {
        counter-increment: bibitem;
        padding: 0 0 0 .3em;   
    }

    div.one-counter ol li::marker {
        content: counter(bibitem) ".";
        font-weight: bold;
    }
</style>
</head>
<body>
  <div class="one-counter">
    <h3>First</h3>
    <ol>
      <li>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue
        vitae tortor dignissim aliquam.</li>
      <li>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus. </li>
    </ol>
    <h3>Second</h3>
    <ol>
      <li>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue
        vitae tortor dignissim aliquam.</li>
      <li>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus.</li>
    </ol>
  </div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Используйте один список

  1. Оберните каждый <h3> в <li> и поместите их в нужное место в пределах <ol>.

  2. Удалить все CSS, относящиеся к <ol> и <li>

  3. Добавить этот набор правил: .hdr { list-style: none; margin-left: -40px; }

  4. Назначить .hdr каждому <h3>: <h3 class='hdr'>...

  5. Назначьте оставшуюся часть <li> a [value=N] N как позицию числа: 

    <li value='1'>First Item</li>

Атрибут [value] <li> используется очень редко, поскольку в ситуациях, когда большое количество <li> и / или <li> генерируется динамически, он было бы проблематично c. См. Пример 2 демонстрации для решения этой проблемы.

В следующей демонстрации есть два примера:

  1. Пример 1 - это ручное назначение [value]

  2. Пример 2 является программным c присвоение [value] (две строки JavaScript)

Демо 

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .hdr {
      list-style: none;
      margin-left: -40px;
    }
    
    /* For demo purposes */ 
    code {
      font-family: Consolas;
      color: green;
      background: rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body>
  <h1><code>[value]</code> Attribute</h1>
  <h2>Example 1</h2>
  <p>List A -- <code>ol#A</code> -- <code>[value]</code> assigned manually</p>
  <ol id='A'>
    <li class='hdr'>
      <h3>First</h3>
    </li>
    <li value='1'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue vitae tortor dignissim aliquam.</li>
    <li value='2'>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus. </li>
    <li class='hdr'>
      <h3>Second</h3>
    </li>
    <li value='3'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue vitae tortor dignissim aliquam.</li>
    <li value='4'>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus.</li>
  </ol>


  <h2>Example 2</h2>
  <p>List B -- <code>ol#B</code> -- <code>[value]</code> assigned programmatically. See <code>&lt;script&gt;</code> block at end of source.</p>
  <ol id='B'>
    <li class='hdr'>
      <h3>First</h3>
    </li>
    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue vitae tortor dignissim aliquam.</li>
    <li>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus. </li>
    <li class='hdr'>
      <h3>Second</h3>
    </li>
    <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec augue vitae tortor dignissim aliquam.</li>
    <li>Nulla facilisi. Duis venenatis ipsum at mauris elementum, ac commodo quam tempus.</li>
  </ol>

  <script>
    /*
    - Collect all <li> in <ol id='B'> that is 
      NOT <li class='hdr'> into a NodeList
    - Your selector can be more generic if using only
      one list: li:not(.hdr)
    */
    const items = document.querySelectorAll('#B li:not(.hdr)');

    /*
    - Iterate through NodeList and assign [value=index+1]
      to each <li>
    */
    items.forEach((li, idx) => li.setAttribute('value', idx + 1));
  </script>

</body>

</html>
1 голос
/ 02 мая 2020

Псевдоэлемент :: marker поддерживается не во всех браузерах, как указано в веб-документах MDN . В настоящее время это только рабочий проект. Я предлагаю использовать элемент :: before и отрегулировать поля или отступы для достижения желаемого позиционирования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...