Horizontal (inline) list in HTML/CSS with divs

Question

I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:

HTML:

<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>

CSS:

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.

Some help on fixing this would be very appreciated, thanks!!

Answer 1

#navlist li { display:inline }
#navlist div { display:inline }

Making the <li> inline while leaving the <div> as block is your problem.

Alternatively, you may want inline-block for the <li> if you are going to be controlling sizes or margins.

You may also be interested in this demo: http://phrogz.net/JS/ul2menu/purecss_testsuite.html

I'm not sure why you have <div> inside your <li>, but I presume you have your reasons.