Html 带左对齐的嵌套列表；子弹“；

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

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

项目根节点

1任务1

1.1旅行
1.2工作


等等

关掉子弹很容易。左对齐每个li很容易。但问题是让跨距保持在左侧，同时跨距后的文本正确缩进并对齐该级别

我能得到的最接近的结果是，由于每个级别的跨度都有相同数量的字符，我可以只添加一个右边距，这将推动下面的文本。问题是，由于跨距中的字符宽度略有不同，文本可能与上面或下面的行垂直对齐，偏离一到两个像素

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

这可能有点“黑客”，但我要做的是使用嵌套的无序列表，正如您所拥有的那样，并将跨度放在其中，以及与类一起，如

list-level-1

，

list-level-2

，等等。对于禁用JavaScript的浏览器，它将显示为普通嵌套列表。使用jQuery或其他JavaScript库，将列表转换为一系列

s（使用两个类，如

列表项目编号
和
列表项目级别-1
，
列表项目级别-2
）。将后者的左边距设置为适当的宽度

<div class="row"><div class="list-item-number">1</div><div class="list-item-level-1">Fruits</div></div>
<div class="row"><div class="list-item-number">1.1</div><div class="list-item-level-2">Apples</div>
<div class="row"><div class="list-item-number">1.1.1</div><div class="list-item-level-3">Red Delicious</div>
<div class="row"><div class="list-item-number">1.1.2</div><div class="list-item-level-3">Fuji</div>

1水果
1.1应用程序
1.1.1红色美味
1.1.2福吉

您甚至可以使用具有类似效果的表（在我看来，还有更高级的语义），但我在使用表和jQuery时运气不好

对于纯HTML/CSS解决方案，最好的选择是使用表。请记住，表格并非天生就不好——它们只是不利于布局。
一个有点魔力的有序列表，没有IE7及以下版本，尽管它会退化为缩进编号的列表

CSS

以及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>


项目根节点
任务1
旅行（1.1）
旅行（1.1.1）
工作（1.1.2）

工作（1.2）

任务2
旅行（2.1）
工作（2.2）

任务3
旅行（3.1）
工作（3.2）




在
psuedo元素之前调整
：的宽度，以创建缩进文本

已更新以使项目节点未编号，并包含IE7重新合并

更新

使用
dl
s（定义列表）链接到JSFIDLE，其中包含一个代码样本，而不是记住需要IE7支持

为了保持所有内容都正确对齐，我会通过浮动跨距使其脱离正常流动，并给它们一个负的裕度。这将使它们不会影响文本的布局，除非它们实际遇到它。对于列表的每一级，您都需要一个规则，但这只是CSS*中嵌套列表特有的

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  margin-left:1em;
  padding-left: 0;
}

li li span {
  display: block;
  float: left;
  margin-left: -2em;
}

li li li span { margin-left: -3em; }

我刚刚在破败不堪的IE 5 for Mac上测试了它，它工作得非常好，所以我认为新版本应该可以，不像使用伪元素和生成内容的解决方案（哪一种在风格上更为优越，但“闯入探险家”你考虑过使用表格吗？你考虑过并排使用两个div吗？@LukeLandwalker我会杀了你…表格…对于非表格数据，你在吸烟吗？这是表格数据。你有两列信息：一个章节号和它的标题。非表格数据是关于什么的那是什么？讽刺的是，我实际上是在转换使用表、div和span的遗留代码…然而，在我看来，它不是表格数据。树的节点之间存在明显的父子关系。最后我可能不得不使用表…我只是不相信它是表格数据。如果我要使用列表级别-#（我在最初的帖子中提到了这种方法）为了控制缩进，我不妨将其作为一个无序列表。我看不到使用javascript转换它的好处。我缺少什么？使用javascript将UL样式转换为表示样式可以让您认为数据在概念上应该被布局。javascript允许您控制它的外观比CSS更准确。该评论措词不当。我应该说的是，使用JavaScript在客户端呈现数据可以让您以表示其自然结构的格式存储数据，同时以视觉上吸引人的方式呈现数据。当用户不使用JavaScript时，它会优雅地退化，变成一个普通的
我没有JavaScript。我明白你说的Syrion…只是不确定我是否同意。要么是标记（当使用列表级-#类方法时）将要求CSS获得正确的宽度和节点编号的右边距或文本的左边距，以便将其对齐。由于我已经在使用CSS，我认为我最好将其保留为嵌套列表。此时我不打算将其标记为答案，因为我正在寻找非跟踪级别的方法…问题是IE7是我这个网站的主要目标。这个网站是公司使用的内部网站。嗯……那太糟糕了——如果是
dl
的话，你可以手动将编号输入到t中
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  margin-left:1em;
  padding-left: 0;
}

li li span {
  display: block;
  float: left;
  margin-left: -2em;
}

li li li span { margin-left: -3em; }