Prevent multi level Li horizontal breaking

Question

I have the following code for Creating Tree using LI
- Problem : when the tree nodes get big more than the screen width the li is breaking to new line for all tree nodes level , so i need to prevent li breaking and makes the page scroll
This is my Code :

[https://jsfiddle.net/naadydev/xq8a3ztz/2/][1] 

Answer 1

Add white-space: nowrap; to the containing ul and change the display of children lis to inline-block; .

Demo http://jsfiddle.net/5CadG/

#list {
    white-space: nowrap;
}
.tree li {
    /* float: left; */ /* REMOVD */
    display: inline-block;
    /* rest of your styles */
}