CODEWITHSUNDEEP
htmlcss
omg
omg

Reputation: 139972

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

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?

Upvotes: 18

Views: 66372

Answers (8)

Adri&#224;
Adri&#224;

Reputation: 207

You could use display: inline, like this:

li{
    display: inline;
}

Or, if you have more lists, you could assign a class to that specific list:

<ul class="navbar horizontal">
    <li>Test</li>
</ul>

And then style it like:

.horizontal{
    display: inline;
}

Upvotes: 0

bobobobo
bobobobo

Reputation: 67266

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>

Upvotes: 7

jeroen
jeroen

Reputation: 91742

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 */
}

Upvotes: 0

ЯegDwight
ЯegDwight

Reputation: 25239

.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.

Upvotes: 1

Robert DeBoer
Robert DeBoer

Reputation: 1695

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

Upvotes: 1

James Conigliaro
James Conigliaro

Reputation: 3827

You could use the float attribute:

.nav ul li{float:left;}

Upvotes: 4

mkoryak
mkoryak

Reputation: 57968

i think you are looking for

li {
  display:inline;
}

Upvotes: 22

D&#39;Arcy Rittich
D&#39;Arcy Rittich

Reputation: 171491

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.

Upvotes: 4

Related Questions