Floating List Elements To Right Instead Of Down

I would like to float list elements to the right using a list (I like the bullet points), and want to stay away from tables. I would also like to customize the space between the li

Solution 1:

Using the display: inline style on your li element will get your list flowing horizontally. Further styling (such as padding and margin) can let you manipulate the space between the items, and list-style-type will even let you customize the appearance of the bullet.

I'm not aware of any simple means to specify on which item the list will break to a newline, though. It should simply wrap when it reaches the edge of its container. (You could specify the width of the list, although that will change which item the list breaks on depending on the user's font size.)

Solution 2:

You should be able to do something like this:

li {
  float: left;
}

if you want them to go on multiple lines like your example then set a width on the ul like so:

ul {
  width: 200px;
}

(200px is just an example number)

Solution 3:

try to style with css

ul{
width: //configure with your self until 3 list/row
}

li{
display:inline;
float:left;
}

Solution 4:

Can be some like thus:

Live example: http://jsfiddle.net/LK7rd/

html

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

css

ul{
    width: 50%;
}

ulli{
    width: 25%;
    display: block;
    float: left;
}