The Ul LI causing horizontal scroll bar

Question

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:

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

And the HTML is

<ul class="TreeView">
   <li>some text
     <ul class="TreeView">
          <li>some text
            <ul class="TreeView">
              <li>some text
                      ..... this can be n level
              </li>  
            </ul>
           </li>
       </ul>
     </li>  
 </ul>

In above structure all LI's will have 20px padding from left so when the level increases it will lead to horizontal scroll.

How can I avoid the horizontal scroll?

Answer 1

Use

box-sizing:border-box;

for li element as;

.TreeView LI
{
/* The padding is for the tree view nodes */
padding: 0 0 0 18px;
float: left;
width: 100%;
list-style: none; 
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

http://jsfiddle.net/qfQ53/2/

Answer 2

you can try removing the width and float attributes and adding this to your ul css

overflow: hidden;

please report back the changes that happen when you do so or even better create a JFiddle if you can.

Answer 3

You can try this CSS:

overflow-x:hidden;

to hide only the horizontal scrollbar

Answer 4

Demo

Remove padding from .TreeView LI

You can use list-style as

ul {
    list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

You need list-style-position : outside as below

ul {
    list-style:decimal outside none;
}

You final CSS

.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;
}
ul {
    list-style:decimal outside none;
}

Example HTML with added ul li

<ul class="TreeView">
    <li>some text
        <ul class="TreeView">
            <li>some text
                <ul class="TreeView">
                    <li>some text
                        <ul class="TreeView">
                            <li>some text
                                <ul class="TreeView">
                                    <li>some text
                                        <ul class="TreeView">
                                                <li>some text
                                                    <ul class="TreeView">
                                                        <li>some text ..... this can be n level</li>
                                                    </ul>
                                                </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

EDIT

Demo

For giving a variable padding

ul {
    list-style:decimal outside none;
    padding: 0 0 0 18px
}

Read here for more details