<li> <ul> newline

css, html, newline

Solution

You have a few options:

#ranks li {
  float: left;
}

This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,

#ranks li {
  display: inline-block;
}

Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:

#ranks li {
  display: inline;
}

Which will treat the list items like any other inline element (such as `<span>` or `<a>`).

There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out `margin`, and `padding`.

Demo: http://jsbin.com/iconud/edit#html,live

Look Out Ahead!

You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:

<ul id="ranks"><li>
  Index</li><li>
  Contact</li><li>
  Portfolio</li>
</ul>

Or have them all inline, a little less discernible:

<ul id="ranks">
  <li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>

This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):

<ul id="ranks">
  <li>Index
  <li>Contact
  <li>Portfolio
</ul>

Multiple Lists Inline Too!

From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:

#ranks,
#specs {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#ranks li,
#specs li {
  display: inline-block;
  border: 1px solid #CCC;
  padding: 5px 10px;
}

Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:

<ul id="ranks">
  <li>Index</li>
  <li>Contact</li>
  <li>Portfolio</li>
</ul>

<ul id="specs">
  <li>Foo</li>
  <li>Bar</li>
</ul>

This results in both lists, and their items, being displayed in a horizontal fashion.

Demo: http://jsbin.com/iconud/2/edit

Problem

Original source