HTML/CSS - 无序列表每个“级别”的标题答案

【问题标题】：HTML/CSS - Headings for each "level" of unordered listHTML/CSS - 无序列表每个“级别”的标题
【发布时间】：2010-04-09 14:43:28
【问题描述】：

我想利用使用嵌套无序列表的分层优势，但我需要像表格列标题一样在顶部标识每个“级别”。例如，给定这个无序列表：

产品1

第 1 部分

子部分 1
第二部分

第 2 部分

产品 2

第 1 部分
第 2 部分

我希望所有“产品”相互对齐，并在顶部有一个标题为“产品”。然后会有一个“Parts”标题和一个“Subparts”标题。我想我可以在无序列表的正上方有一个表格，然后让级别与之对齐，但我觉得可能有更好的方法。谢谢！

【问题讨论】：

这对于stackoverflow来说是没有问题的。你应该在doctype.com 上问这个（见常见问题）
没有意识到所有这些合作伙伴网站都存在，我会检查一下。谢谢。
好的，我想我在这里误解了一些东西。您想以编程方式执行此操作。所以这不是一个网页设计问题，是吗？您想使用 javascript 还是通过在服务器端动态创建页面来执行此操作？您应该更新问题的标签，并更清楚地说明您希望如何归档它。无论如何，我删除了我的答案，因为它无关紧要。

标签： html css

【解决方案1】：

<ul>
<li>Product1
    <ul>
     <li>Part1
         <ul>
         <li>Subpart1</li>
         <li>Subpart2</li>
         </ul>
     </li>
     </ul>
</li>
</ul>

<ul>
<li>Product1
     <ul>
     <li>Part1</li>
     <li>Part1</li>
     </ul>
</li>
</ul>

结果：

产品1
- 第 1 部分
  - 子部分 1
  - 子部分 2

产品2
- 第 1 部分
- 第 1 部分

【讨论】：

【解决方案2】：

您可以使用定义列表 (dl) 并将您的 dt 设置为您的标题，并将您的其他列表放入您的 dd 中。如果您使用的列表确实是一组术语及其相关定义，这在语义上将是一种很好的方法。

Definition List Documentation

例子：

<dl>
<dt>Product 1</dt>
<dd>
   <ul>
     <li>Parts</li>
   </ul>
</dl>

/*CSS*/
dt{font-weight:bold;}

【讨论】：