<li> <ul> newline - html

Question

So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/

Answer 1

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

Answer 2

with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block

Answer 3

ul li{ display:inline;} do the trick?

Answer 4

<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak

Answer 5

This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
​​CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
​
​JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/

Answer 6

Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}