Horizontal (inline) list in HTML/CSS with divs - html

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.

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 as a block by default. Display them inline as well and it should work.
#navlist div, #navlist li
{
display: inline;
}
#navlist li
{
list-style-type: none;
padding-right: 20px;
}

Answer 4

Try float: left; on the list items, perhaps something like that:
#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}
Also, make sure to specify a height to the ul because the elements will go out of the flow, meaning that the ul won't have any height. You can also use a 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%;
}
You just add class="clear" to the <ul>. Google clearfix css for more infos :)