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

时间:2010-04-09 14:43:29

标签: html css

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

       
  • 产品1
  •    
            
    • 第1部分
    •          
                    
      • 第1部分
      •             
      • 第2部分
      •          
            
    • 第2部分
    •    
       
  • 产品2
  •    
            
    • 第1部分
    •       
    • 第2部分
    •    

我希望所有“产品”彼此对齐,并在顶部有一个标题为“产品”的标题。然后会有一个“部件”标题和一个“子部件”标题。我想我可以在无序列表的正上方有一个表,然后让它与它排成一行,但我觉得这可能是一个更好的方法。谢谢!

2 个答案:

答案 0 :(得分:1)

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

Definition List Documentation

示例:

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

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

答案 1 :(得分: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部分          
                 
      • Subpart1
      •          
      • Subpart2
      •          
           
    •      
  • 产品2      
           
    • 第1部分
    •      
    • 第1部分
    •