How can I make <li> elements flow left-to-right instead of top-to-bottom?

Question

Here are my <li> elements. I want them to appear left-to-right instead of top-to-bottom.

<div class="nav">
  <ul>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
  </ul>
</div>

How can I do this?

EDIT:how to control spacing between each li element and its bachground color and spacing between a element and border of li element?

Answer 1

Try:

<style>
.nav li {display:inline;}
</style>
<div class="nav">
        <ul>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
                <li><a href="test">test</a></li>
        </ul>
</div>

The styles should really be in an external style sheet, I just put them on the page for simplicity.

Answer 2

i think you are looking for

li {
  display:inline;
}

Answer 3

You could use the float attribute:

.nav ul li{float:left;}

Answer 4

There's a few ways.

One way is display:inline as the other posts mention

Another way is float:left;

edit: more detail! try this out in a page

<style>

/* style 1 */

div.nav1 ul li
{
  display:inline;

  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
  line-height: 4em;
}


/* style 2 */
div.nav2 ul li
{
  float: left;
  border: solid 1px black;
  padding: 10px;
  margin: 10px;

  list-style-type: none;
}

</style>

<h1>using display: inline;</h1>
<div class="nav1">
<ul>
<li><a href="#">inline</a></li>
<li><a href="#">inline blah bla</a></li>
<li><a href="#">i am not so neat on</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">wrapping and I probably</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">need a bit of work and tweaking</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">the "line-height" css property</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">to make me wrap better</a></li>
<li><a href="#">inline</a></li>
<li><a href="#">also notice how i tend to break a line up into .. two.  see?  make your browser narrow.</a></li>
<li><a href="#">inline</a></li>
</ul>
</div>

<hr />

<h1>using float:left;</h1>
<div class="nav2">
<ul>
<li><a href="#">floated left</a></li>
<li><a href="#">i tend to behave</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">better for wrapping</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">when the list</a></li>
<li><a href="#">floated left</a></li>
<li><a href="#">reaches the edge of the page</a></li>
<li><a href="#">floated left</a></li>
</ul>
</div>

Answer 5

Just to let you know, that IE does a "step-down" thing when you float list items to the left, and I think that IE is the only browser to do that, all the others keep going straight. To have the list items goes straight across, use "display: inline" in your css instead of "float: left", this should work in all browsers this way. For more in dept explanation, check out this quick tutorial

Answer 6

.nav li  { display: inline }

For further details and inspiration, have a look at Listamatic. They've got tons of excellent tutorials with step-by-step explanations and everything about margin, padding, and browser compatibility issues.

Answer 7

To answer the question after the edit:

li {
    float: left;
    display: block;
    padding: 4px 12px;   /* example spacing */
    margin: 0px 4px;     /* example margin */
}

Edit: You might want to apply the padding and the display:block to the <a> element so that you can click on the padding as well:

li {
    float: left;
    margin: 0px 4px;     /* example margin */
}
li a {
    display: block;
    padding: 4px 12px;   /* example spacing */
}