title: The Ul LI causing horizontal scroll bar
body: <p>I am using UL and LI elements for making a tree. The tree can be have n level. To make UL Li to look like a tree I am using following CSS:</p>
  
  <pre><code>.TreeView
  {
      font: Verdana;
      line-height: 20px;
      cursor: pointer;
      font-style: normal;
  }
  
  .TreeView LI
  {
      /* The padding is for the tree view nodes */
      padding: 0 0 0 18px;
      float: left;
      width: 100%;
      list-style: none; 
  }
  
  .TreeView, .TreeView ul
  {
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>And the HTML is</p>
  
  <pre><code>&lt;ul class="TreeView"&gt;
     &lt;li&gt;some text
       &lt;ul class="TreeView"&gt;
            &lt;li&gt;some text
              &lt;ul class="TreeView"&gt;
                &lt;li&gt;some text
                        ..... this can be n level
                &lt;/li&gt;  
              &lt;/ul&gt;
             &lt;/li&gt;
         &lt;/ul&gt;
       &lt;/li&gt;  
   &lt;/ul&gt;
  </code></pre>
  
  <p>In above structure all LI's will have 20px padding from left so when the level increases it will lead to horizontal scroll.</p>
  
  <p>How can I avoid the horizontal scroll? </p>