Align bullet points to the right instead of left

Question

I have bullet points that are aligned right and I would like the bullet points to appear on the right instead of left.

I'm using bullet points because I will replace the bullet with an arrow the points to a URL and use it for navigation.

How do I do this?

This is the code that i'm using for the navigation in the header:

.header right {
padding-top: 8px;
float: right;
text-align: right;
}
.header right ul
{
margin:0;
padding:0;
}
.header right a
{
display:block;
color: black;
text-decoration: none;
}

and the html

<right>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Jewel Thieves</a></li>
<li><a href="">Community</a></li>
</ul>
</right>

If I use direction rtl, the bullets dissapeared.

@Anthony "If I use direction rtl, the bullets disappeared" ?? no they don't.you probably have some other css that is causing the bullets to disappeare — Exlord, Jan 11 '14 at 06:09

score 17 · Answer 1 · answered Jan 11 '14 at 06:32

17

Setting direction: rtl on the list element would put the bullets on the right, but this is fragile, since the setting also sets the overall writing direction. This means that e.g. “foo (bar)” will be displayed as “(foo (bar”, as per the Unicode bidirectional algorithm.

To deal with this, you need to set the direction to left-to-right inside the list items. In the special case that you might have here, each li contains just an a element and nothing more. Then the following would work:

<style>
ul { direction: rtl; }
ul li a { direction: ltr; unicode-bidi: embed; }
</style>

However, this is probably too tricky. It is better to append the list markers (bullets, arrows, whatever) as characters or as images, possibly with CSS, to the list items and omit browser-generated list markers. The details depend on the specifics and context of the original problem.

answered Jan 11 '14 at 06:32

Jukka K. Korpela

195,524
37
270
390

1

1+ Nice catch, everyone else failed to mention this. – Josh Crozier Jan 11 '14 at 06:37
ul li *{...} is even better – Exlord Jan 11 '14 at 07:43
You just need to add the LRM character after the last bracket. HTML entity: ‎ as per [this](http://stackoverflow.com/questions/5741522/brackets-displays-wrongly-for-right-to-left-display-style) – mplungjan Jan 11 '14 at 09:11
1

Please give an example of images on the list items that align correctly on the right of the contents - I believe it is NOT trivial – mplungjan Jan 11 '14 at 09:19

score 13 · Answer 2 · answered Jan 11 '14 at 05:32

13

you can use direction:rtl; css property

or dir="rtl" html attribute

answered Jan 11 '14 at 05:32

Exlord

5,009
4
31
51

@Anthony this works perfectly. No issues in this and it is ridiculous you marked an answer that has nonexistent HTML tag – Amarnath Balasubramanian Jan 11 '14 at 06:02
1

Not robust. Check what happens if you have `
foo?

Jukka K. Korpela

Jan 11 '14 at 06:12

@JukkaK.Korpela so what should be done to avoid this?? – Amarnath Balasubramanian Jan 11 '14 at 06:24

1

@JukkaK.Korpela What is not robust? Please elaborate – mplungjan Jan 11 '14 at 06:32

1

@AmarnathBalasubramanian `

foo?‎

` will work – mplungjan Jan 11 '14 at 09:20

Sajad Karuthedath · Accepted Answer · 2018-01-28T13:16:52.787

13

try this

DEMO

MARK UP:

<div dir="rtl">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Jewel Thieves</a></li>
<li><a href="#contact">Community</a></li>
</ul>
</div>

edited Jan 28 '18 at 13:16

answered Jan 11 '14 at 05:47

Sajad Karuthedath

14,987
4
32
49

`div` container and CSS declarations block (in JSFiddle) are unnecesary. – Miquel Al. Vicens Dec 20 '17 at 14:29

score 2 · Answer 4 · answered Jan 11 '14 at 05:33

2

 <!DOCTYPE html>
    <html>
    <body>

<ul dir="rtl">
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
    <li>Write this text right-to-left</li>
</ul>

    </body>
    </html>

It will work for you

answered Jan 11 '14 at 05:33

Dipak

115
1
9

mplungjan · Answer 5 · 2014-01-11T09:18:07.490

2

Works for me

Live Demo

ul {
 direction:rtl;
 list-style-image:url(http://australianetwork.com/img/icon_arrow_left_black.png);   
}

Using simple and valid - note the entity ‎ on the right bracket and questionmark

<ul>
  <li><a href="">Home (on the range)&#x200E; </a></li>
  <li><a href="">Jewel Thieves</a></li>
  <li><a href="">Community</a></li>
  <li><a href="...">foo?&#x200E;</a></li>
</ul>

edited Jan 11 '14 at 09:18

answered Jan 11 '14 at 05:54

mplungjan

169,008
28
173
236

Align bullet points to the right instead of left

5 Answers5

Linked