Разделители внутри списка OL
Я пытаюсь настроить раздел «справочный документ» как часть адаптивного веб-сайта Webhelp, который я создаю на основе карты 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
Если разделитель предназначен только для стиль, тогда будет работать псевдоэлемент:
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>
Просто создайте
<li class = "divider"></li>, чтобы он содержал разделитель, который вы хотите использовать. (хотя это будет считаться элементом). В противном случае вам придется Macgyver что-то с javascript, который применяет разделители после рендеринга DOM.