Вложенный упорядоченный список внутри неупорядоченного

#html #css

#HTML #css

Вопрос:

Я использую списки для страницы «Правила и условия», и для того, чтобы сделать структуру более аккуратной, я использую упорядоченные списки. Проблема в том, что я хочу сделать внешний список неупорядоченным, и когда я это делаю, он теряет количество вложенных упорядоченных списков. Я знаю, что могу создать это многими способами, в том числе вручную, но я хочу знать, возможно ли как-то справиться с этой ситуацией.

 <ol>
  <li>
    <h2>Title of section 1</h2>
    <ol>
      <li>Text 1.1
        <li>
          <li>Text 1.2
            <ol>
              <li>Text 1.2.1</li>
              <li>Text 1.2.2</li>
            </ol>
          </li>
    </ol>
    </li>
    <li>
      <h2>Title of section 2</h2>
      <ol>
        <li>Text 2.1
          <li>
            <li>Text 2.2
              <ol>
                <li>Text 2.2.1</li>
                <li>Text 2.2.2</li>
              </ol>
            </li>
      </ol>
      </li>
</ol>

Используя CSS, я могу показать все так, как должно быть

https://jsfiddle.net/tutancamon/bfhkqtdg/41/

Я хочу удалить номер перед заголовками, потому что он уже содержит их…

1. Вам, вероятно, не нужны списки, вы, вероятно, хотите, чтобы вложенные <section> (и потенциально <article> ) элементы создавали желаемую семантику

2. Да, как я уже упоминал, я знаю, что есть много вариантов. Все еще интересно, возможно ли это;)

3. Вы можете использовать list-style: none; для удаления чисел.

4. list-style потенциально переопределяет другие свойства в стиле списка. Поскольку в вопросе предлагалось удалить маркеры элементов списка в списке, list-style-type следует использовать вместо этого, чтобы быть более конкретным.

Ответ №1:

Элемент неупорядоченного списка <ul> звучит так, как вам нужно использовать.

 ul {
  list-style: none;
}

 <ul>
  <li>
    <h2>Title of section 1</h2>
    <ol>
      <li>Text 1.1
        <li>
          <li>Text 1.2
            <ol>
              <li>Text 1.2.1</li>
              <li>Text 1.2.2</li>
            </ol>
          </li>
    </ol>
    </li>
    <li>
      <h2>Title of section 2</h2>
      <ol>
        <li>Text 2.1
          <li>
            <li>Text 2.2
              <ol>
                <li>Text 2.2.1</li>
                <li>Text 2.2.2</li>
              </ol>
            </li>
      </ol>
      </li>
</ul>

1. Извините, я понял, что неправильно прочитал проблему. Я думаю, вам нужно использовать counter-increment и counter-reset , как в этой статье: css-tricks.com/custom-list-number-styling , тогда вы могли бы установить размер шрифта равным 0px или что-то в этом роде для внешнего списка…

Ответ №2:

Используйте свойство css list-style-type следующим образом:

 ol.outer {
  list-style-type: none;
}

Однако это приведет к путанице с нумерацией. Который вы можете исправить следующим образом:

 ol {
  list-style-type: none;
  counter-reset: item;
}

ol>li::before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

ol.outer>li::before {
  content: "";
}

 <ol class="outer">
  <li>
    <h3>Section1</h3>
    <ol>
      <li> text1.</li>
      <li> text2 </li>
      <li> text3</li>
    </ol>
  </li>
  <li>
    <h3>section 2</h3>
    <ol>
      <li> text</li>
      <li> text</li>
      <li>
        <strong>Some texts</strong>
        <ol>
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

1. Это будет нацелено на весь упорядоченный список; это именно та проблема, которой OP хочет избежать

2. да, и даже когда я указываю точный ol, он не работает должным образом.

3. @tutancamon на самом деле я протестировал это на вашем собственном коде, и он работает просто отлично: jsfiddle.net/webbertakken/9qrpcykt/1 Это просто подводит вас к следующей проблеме структурирования вашей нумерации

4. @webber Именно моя точка зрения! С номером моей скрипки все в порядке. (Я не сохранил его в прошлый раз, но теперь все должно быть в порядке jsfiddle.net/tutancamon/bfhkqtdg/41 )

5. @tutancamon достаточно справедливо. Я обновил свой ответ упрощенной и исправленной версией того, что вы пытались сделать.