Reputation: 13587

CSS right aligned list

How should I align the list to the right? The text aligns perfectly, however bullets do not. Is there a simple and easy way to do so with CSS?

Code:

<ul style="text-align: right">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Even if I put the rules for LI elements directly to be aligned to the rigth, it does not work.

EDIT I have attached an image showing what I want to achieve: On the right is what I want. On the left is what I have

Upvotes: 22

Answers (4)

Reputation: 3034

If I understand your requirement correctly, then just right-floating the li elements should suffice: http://jsfiddle.net/Jxzs4/1/

Upvotes: 1

Reputation: 487

<ul style="float:right; text-align:left; list-style:none;">

check this.....

if you want bullets then remove list-style:none;

Upvotes: -3

Reputation: 174937

Use direction:

direction: rtl;

It is generally used for right to left languages.

edit:

Float each to the right and clear both.

float: right;
clear: both;

Upvotes: 21

Reputation: 67080

If you need to align the bullets with the text you can use the list-style-position attribute, as follow:

.theList
{
    text-align: right;
    list-style-position: inside;
}

Upvotes: 34