Horizontal (inline) list in HTML / CSS with divs

Question

I am trying to create a simple horizontal list where each element of the list is a div, and I want them all to sit next to each other. When I try to use the code below, divs end up on separate lines. Here is what I have:

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 tried to give my divs the maximum width and width, but this does not work either. Basically, they are displayed without markers on separate lines.

Some help fixing this would be much appreciated, thanks!

Answer 1

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

Creating an <li> inline, leaving the <div> block as your problem.

Alternatively, you may need an inline-block for <li> if you intend to control dimensions 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 a <div> inside your <li> , but I assume you have reasons.

Answer 2

CSS

 * { margin: 0; padding: 0; } ul { background: #48D; height: 35px; line-height: 25px; width: 300px; } li { float: left; list-style-type: none; margin: 5px 0 0 5px; } li div { background: #6AF; padding: 0 5px; } 

HTML

 <ul> <li><div>Text</div></li> <li><div>Text</div></li> <li><div>Text</div></li> </ul> 

Answer 3

Each div inside the list items is displayed by default as a block. Also display them in a line and it should work.

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

Answer 4

Try float: left; in the list items, maybe something like this:

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

Also, do not forget to specify a height for ul, because the elements will exit the stream, which means that ul will not have any height. You can also use clearfix to fix this behavior:

 .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } 

Just add class="clear" to the <ul> . Google clearfix css for more info :)