Как пропустить уровень в HTML-списке?

#html

#HTML

Вопрос:

У меня есть вариант использования, когда я автоматически генерирую HTML из произвольного ввода, что может привести к списку, который пропускает уровень, например:

 <!DOCTYPE html>
<html lang=en>

  <head>
    <title>Skipping a level in a list</title>
  </head>

  <body>
    <ul>
      <li>Valid HTML
        <ul>
          <li>
            <ul>
              <li>But displays an awkward extra marker</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Invalid HTML
        <ul>
          <ul>
            <li>But no extra marker, looks good</li>
          </ul>
        </ul>
      </li>
    </ul>
  </body>

</html>

Как описано там, у меня может быть либо неудобно выглядящий, но допустимый HTML, либо более привлекательный, но недопустимый HTML. Очевидно, что я предпочел бы иметь красивый и корректный HTML.

Могу ли я что-нибудь с этим сделать? Имейте в виду, что я также хочу поддерживать структуру, подобную этой:

 - Lorem
    - Ipsum
  -Dolor

1. Существует ли серверный язык, генерирующий HTML, такой как PHP?

2. Честно говоря, для меня это не имеет смысла: почему это должно быть вложено на два уровня глубже без промежуточного родителя / ссылки?

3. Это простой случай плохого генератора. Проблему можно было бы тривиально решить, не отображая пропущенный уровень, что является заданием JS, а не проблемой HTML. Вы также могли бы справиться с этим с помощью CSS, но вам нужно было бы добавить класс к маркеру, который вы хотите скрыть.

4. @JohnVandivier, отсутствие рендеринга пропущенного уровня привело бы к тому, что пропущенный уровень был бы Lorem на том же уровне, что и Dolor , что было бы неправильно. Хотя скрытие пропущенного, отмеченного с помощью CSS, кажется возможным.

Ответ №1:

Вы можете использовать CSS, чтобы пропустить второй или любой другой уровень.

Лучше всего использовать класс css, зависит от вашего варианта использования.

Например:

 .item-level-not-visible{
    list-style-type: none;
}

 ul ul{ /*skip second level*/
  list-style-type: none; 
}

ul ul ul{
  list-style-type: square;
}

 <!DOCTYPE html>
<html lang=en>

  <head>
    <title>Skipping a level in a list</title>
  </head>

  <body>
    <ul>
      <li>Valid HTML
        <ul>
          <li>
            <ul>
              <li>But displays an awkward extra marker</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Invalid HTML
        <ul>
          <ul>
            <li>But no extra marker, looks good</li>
          </ul>
        </ul>
      </li>
    </ul>
  </body>

</html>

1. Проголосовано «Против», потому что CSS — правильный способ сделать это, но обратите внимание, что классы предпочтительнее правил на основе элементов. Например, если вы добавите еще один уровень глубже, вы заметите, что проблема возвращается.

Ответ №2:

Единственный известный мне способ — это допустимый метод, который вы использовали. Вы могли бы сделать что-то подобное, но я не уверен, какой метод написания был бы предпочтительнее другими разработчиками:

 <ul>
    <li><ul>
         <li>List item</li>
     </ul></li>
</ul>

или

 <ul>
    <li><ul><li>List item</li></ul></li>
</ul>

1. Ах, извините, я имел в виду не неудобный HTML-код, а результат. Пожалуйста, взгляните на отображаемый результат, там есть дополнительный маркер.

2. Да, я видел дополнительный маркер и никогда не знал, что такое может произойти. Я видел, что в другом ответе было хорошее объяснение того, как это исправить. Спасибо за ваш вопрос! Я нашел это чем-то полезным и интересным для ознакомления.