CODEWITHSUNDEEP
html
user3871
user3871

Reputation: 12718

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 list items, and specify when the list items wrap. For example, 3 list items per "row."

Example picture:

enter image description here

How can this be done?

Upvotes: 0

Views: 545

Answers (4)

Rafael Soufraz
Rafael Soufraz

Reputation: 964

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%;
}

ul li{
    width: 25%;
    display: block;
    float: left;
}

Upvotes: 0

Ijal Mamen
Ijal Mamen

Reputation: 19

try to style with css 

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

li{
display:inline;
float:left;
}

Upvotes: 0

Brian S
Brian S

Reputation: 5056

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

Upvotes: 2

lukehillonline
lukehillonline

Reputation: 2647

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)

Upvotes: 2

Related Questions