title: Nested list with left aligned "bullets"
body: <p>I have a requirement to display a hierarchy of projects. The obvious solution is a series of nested unordered lists. However, the problem I need to overcome is that the node value needs to be left aligned across the entire tree with the project name being indented as expected in a tree. Here is a sample</p>
  
  <pre><code>  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
  </code></pre>
  
  <p>The markup is fairly simple...</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;&lt;span&gt;&lt;/span&gt;Project Root Node
        &lt;ul&gt;
           &lt;li&gt;&lt;span&gt;1&lt;/span&gt;Task 1
              &lt;ul&gt;
                 &lt;li&gt;&lt;span&gt;1.1&lt;/span&gt;Travel&lt;/li&gt;
                 &lt;li&gt;&lt;span&gt;1.2&lt;/span&gt;Do Work&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
           ...and so on...
  </code></pre>
  
  <p>Turning the bullets off is easy. Left aligning <em>every</em> <strong>li</strong> is easy. But the problem is getting the span to stay to the left while the text after the span is properly indented and aligned for that level.</p>
  
  <p>The closest I could get it was that since the span for each level has the same number of characters I could just add a right margin and that would push the following text over. The problem is that since the characters in the span vary slightly in width, the text could be one or two pixels off in vertical alignment with the row above or below.</p>
  
  <p>The other solution I had was to include a "level number" class when rendering the li element along with an appropriate style that set inline-block and width. My problem with that is making sure I defined enough levels to cover any tree depth.</p>