22

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

3

4 Answers 4

33

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;
}​
4
  • 2
    .theList where is this class, with ul or li
    – Wasim A.
    May 7, 2014 at 4:04
  • in my case, i added html{direction:rtl;}
    – Wasim A.
    May 7, 2014 at 4:09
  • 1
    @wasim it's applied to UL. Rtl direction does something different (right aligned with bullet on right of text) because it's not intended for styling but for Rtl layout languages. I'd avoid to use a style for its effect instead of its intent. May 7, 2014 at 7:59
  • Little late to the game, but is it possible to align the bullets inside, and also aligned right.
    – lukramon
    Dec 10, 2021 at 19:58
20

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;
5
  • Thanks for response but it reverses bullets with text - this is not what I need. May 3, 2012 at 12:10
  • 2
    Than please rephrase your question and add an image of desired output. Because I clearly misunderstood. May 3, 2012 at 12:12
  • Your suggestion with float: right kinda works, however with clear:both it breaks my design and the element is positioned outside the parent container May 3, 2012 at 12:22
  • We will continue this when I get to a computer. I can't help you much more from mobile. @lukas May 3, 2012 at 12:37
  • 1
    i prefere the direction solution , you saved my day (y)
    – dzgeek
    Nov 15, 2015 at 14:21
1

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

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

check this.....

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.