html - 左对齐的嵌套列表 "bullets"

Question

我需要显示元素的层次结构。显而易见的解决方案是一系列嵌套的无序列表。但是，我需要克服的问题是节点值需要在整个树中左对齐，元素名称在树中按预期缩进。这是一个示例

  Project Root Node
1    Task 1
1.1     Travel
1.2     Do Work
2    Task 2
2.1     Perform Testing
2.1.1      UI Testing
2.1.2      Connection Testing

标记相当简单...

<ul>
   <li><span></span>Project Root Node
      <ul>
         <li><span>1</span>Task 1
            <ul>
               <li><span>1.1</span>Travel</li>
               <li><span>1.2</span>Do Work</li>
            </ul>
         </li>
         ...and so on...

关闭子弹很容易。左对齐 every li 很容易。但问题是让 span 保持在左侧，而 span 之后的文本正确缩进并针对该级别对齐。

我能得到的最接近的是，由于每个级别的跨度具有相同数量的字符，我可以只添加一个右边距，这将插入以下文本。问题在于，由于 span 中的字符宽度略有不同，因此文本在垂直对齐上方或下方的行时可能会偏离一两个像素。

我的另一个解决方案是在呈现 li 元素时包含一个“级别编号”类以及设置内联 block 和宽度的适当样式。我的问题是确保我定义了足够的级别来覆盖任何树深度。

Answer 1

带有一点 counters 的有序列表魔术，没有 IE7 和更低版本，尽管它会降级为缩进编号列表。

CSS

ol {
  counter-reset: item; 
  padding: 0; 
  margin: 0;
  margin-left: 20px !ie7;
}
ul {margin: 0; padding: 0; list-style: none;}
li {
  display: block;
}
ol li:before {
  display: inline-block; 
  content: counters(item, ".") " "; 
  counter-increment: item;
  width: 50px;
}
ol li li:before {width: 70px;}
ol li li li:before {width: 90px;}
ol li li li li:before {width: 110px;}

和 HTML:

<ul>
   <li>Project Root Node
   <ol>
   <li>Task 1
      <ol>
      <li>Travel (1.1)
        <ol>
        <li>Travel (1.1.1)</li>
        <li>Do Work (1.1.2)</li>
        </ol>
      </li>
      <li>Do Work (1.2)</li>
      </ol>
    </li>
    <li>Task 2
      <ol>
      <li>Travel (2.1)</li>
      <li>Do Work (2.2)</li>
      </ol>
    </li>
       <li>Task 3
      <ol>
      <li>Travel (3.1)</li>
      <li>Do Work (3.2)</li>
      </ol>
    </li>
  </ol>
</li>   
</ul>

调整 :before 伪元素的宽度以创建缩进文本

已更新，使元素节点不编号并包括 IE7 remargin

更新

链接到 JSFiddle，其中包含使用 dl(定义列表)的代码示例，而不是考虑对 IE7 支持的需要

JSFiddle using DL