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 div

Answer 1

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 2

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 :)

Answer 3

#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 4

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>