CODEWITHSUNDEEP
htmlcss
Zac
Zac

Reputation: 12836

Horizontal inline list with nested child lists

I have a list with child elements like :

<ul>
    <li>.. </li>
    <li>
        <ul>
            <li>.. </li>
        </ul>
    </li>
    <li></li>
</ul>

<style> li {float: left; margin-left: 10px }  li ul {float: left} </style>

This is fine in Firefox, all the list elements being inline horizontally like I want.

LI LI LI LI LI

When I look in Chrome though those child elements are dropped below the main list elements like this :

LI     LI                LI
           LI     LI

I tried display: inline on all of the elements but it made no difference.

What is the best cross browser way to create a horizontal row of list elements that have nested children like this?

Here is a fiddle : http://jsfiddle.net/thirtydot/7yufQ/1/

In Firefox the numbers are screwed up from the floats and Chrome shows them as in my example above.

Upvotes: 0

Views: 3119

Answers (3)

elclanrs
elclanrs

Reputation: 94101

The problem with your code is whitespace after the "2". I just removed it an put the <ul> next to the "2" and it works just fine in Chrome. Look http://jsfiddle.net/7yufQ/2/

Upvotes: 0

James Montagne
James Montagne

Reputation: 78630

You can make both ul and lis inline.

http://jsfiddle.net/QFjgH/

ul, li {
 display: inline;   
}

li { margin-left: 10px; }

Upvotes: 0

AlexC
AlexC

Reputation: 9661

<style> 
    ul{
      padding:0px;
      margin:0px;
      list-style-type:none;
      }
    li {float: left; margin-left: 10px }  
    li ul {float: left;} 
</style>

here is an example, works fine for me in Chrome as well

http://jsfiddle.net/corotchi/8BLck/

Upvotes: 1

Related Questions