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

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

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

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

Answer 1

这可能有些“hackish”，但我要做的是使用嵌套的无序列表，就像你拥有它们一样，并将跨度放在那里，使用类list-level-1，{{1} }，等等。对于禁用JavaScript的浏览器，它将显示为常规嵌套列表。使用jQuery或其他JavaScript库，将列表转换为list-level-2 s系列（包括<div>和list-item-number，list-item-level-1两个类。将后者的margin-left设置为适当的宽度。

list-item-level-2

你甚至可以使用一个表来达到类似的效果（在我看来，这意味着更好的语义），但是我对表和jQuery运气不好。

对于纯HTML / CSS解决方案，您最好的选择是使用表格。请记住，表本身并不坏 - 它们只是对布局不利。

Answer 2

一个有点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重新映射

<强>更新

使用dl（定义列表）链接到包含代码的JSFiddle，而不是考虑到需要IE7支持

<强> JSFiddle using DL

Answer 3

为了使所有内容保持正确对齐，我会通过浮动它们使其超出正常流量并给它们带来负余量。这将导致它们不影响文本的布局，除非它们实际遇到它。你需要一个规则用于列表的每个级别，但这只是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中进行了测试，它运行得很好，所以我认为新版本应该没问题，不像使用伪元素和生成内容的解决方案（风格优越但在资源管理器中突破＆lt; 8 ）。

_{*像这样重复的CSS可以简单地生成 - 一个快速的Ruby单行将(2..10).each {|n| puts("#{'li '*n}span {margin-left: -#{n}em}")}，其中10替换为级别数}

带有左对齐“子弹”的嵌套列表

3 个答案: