Geek Answers Handbook

<li> <ul> New line

So I need help how to delete a new line after <li> 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 html:

 <ul id="ranks"><li class="sprite-admin"></li></ul>

Everything works well, as long as there is only one of <ul id ="etc"> , but if there are several, it will create a new line and "stack" them .. is it possible to make them not stack, but just go left to right? Thanks

EDIT:

Demo: / deleted /

+7
source share
6 answers

You have several options:

 #ranks li { float: left; }

This will move all list items to the left, without wrapping, until the horizontal screen space is no longer available. As an alternative,

 #ranks li { display: inline-block; }

which will also place your elements side by side, but treat them as bock level elements. If you don't like the block-level style, you can go with a direct built-in display:

 #ranks li { display: inline; }

Which will handle list items, such as any other inline element (e.g., <span> or <a> ).

There are other inherent styles that exist in list items, as well as their parent list, which you may need. Be sure to check margin and padding .

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

Look ahead!

You may find that there is an unsightly gap between the list items when they are located side by side. This is a common problem with inline lists. One solution is to remove the newline space between the tags of the close and open list items:

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

Or all of them are built-in, a little less noticeable:

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

It is a little complicated on the eyes. With HTML, since closing tags is not always required, you can also leave a closing tag (although this makes me a little nervous):

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

Multiple Inline Too Lists!

From some OP comments, it looks like they might be trying to get not only the inline list items, but the lists themselves. If this is the case, apply the same rules above 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; }

Two rule sets have been defined here that use selectors that look for identifiers and then tags. You can simplify this by applying a generic class to lists or by dividing the selectors into a generic parent element. The following 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 causes both lists and their items to be displayed horizontally.

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

+15
source

with some css

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

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

+1
source

<li> default is display:block; if you give it display:inline; or diplay:inline-block; which should remove the line break

0
source

This is a basic example of horizontal UL.

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/

0
source

Another option is to set the font size: 0 to ul, and then restore the required font size in the li tags. I prefer this because it is contained in the ul tag, does not need additional hacks such as clear: both, and explains what the style should do (hide something not inside the list item).

 ul { list-style-type: none; font-size: 0; } li { display: inline-block; /* Or inline, as you like */ font-size: 16px; }
0
source

More articles:


All Articles