Question

我正在尝试建立一个“参考文档”部分，作为我从DITA地图构建的Webhelp Responsive网站的一部分。我想获得一个典型的文档列表，具有唯一的参考编号（通常为[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转换中的链接系统...）。

Answer 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>

OL列表中的分频器

1 个答案: