Разделители внутри списка OL - PullRequest
Новая
       20

Разделители внутри списка OL

0 голосов
/ 18 июня 2019

Я пытаюсь настроить раздел «справочный документ» как часть адаптивного веб-сайта, созданного на основе карты DITA. Я хочу получить типичный список документов с уникальным ссылочным номером (обычно [1], [2], [3] ... [N]), за которым следует информация о документе (номер документа, название и т. Д.) и я хотел бы "разделить" мой список на несколько разделов (например, руководства, процедуры, статьи и т. д.), но ПРОДОЛЖАЯ отображать счетчик списка.

Я заметил, что могу вставить <div> между двумя <li></li> элементами, и он будет правильно отображаться, но это недопустимо с точки зрения чистого HTML. 

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <div style="margin-left: -20px; margin-top:20px; margin-bottom: 20px;">test divider</div>
  <li>Coca Cola</li>
</ol>

<p>Remove bullets, margin and padding:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Есть ли «правильный» способ сделать это, не разбивая <ol> на отдельные списки и использовать внешний счетчик, например, с CSS (я хочу сохранить исходный счетчик, так как это тот, который используется при связывании система в моем преобразовании DITA-HTML ...).

1 Ответ

2 голосов
/ 18 июня 2019

Если делитель только для стиля , тогда будет работать псевдоэлемент: 

ul.demo {
  list-style-type: none;
  margin: 1em;
  padding: 0;
}

li.first::before {
  content: "--------- test divider -----------";
  display: block;
}
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li class="first">Coca Cola</li>
</ul>

Вы можете дополнительно улучшить эти атрибуты данных 

ul.demo {
  list-style-type: none;
  margin: 1em;
  padding: 0;
}

li.first::before {
  content: "-----" attr(data-type) "-----";
  display: block;
  color: red;
}
<ul class="demo">
  <li class="first" data-type="Beverages">Coffee</li>
  <li>Tea</li>
  <li class="first" data-type="Soft Drinks">Coca Cola</li>
</ul>
...