Latest Lists - How to move the circles on the side of the list?

How to move the circles on the side of the list?

I am writing a website in arabic. I used an unordered list <ul>, and the <li> circles appear to be on the left side of course. Is there a way that they can start on the right instead?

Public Comments

Set the "dir" attribute on the list to "rtl". This will cause the text to align to the right and the bullets to appear on the right. You should be doing this for any content in a right-to-left language anyway. For example: <ul dir="rtl"> <li>blah blah</li> <li>blah blah</li> </ul>
Try this example and use the css. Rock and roll <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Right-aligned bullets</title> <style type="text/css"> ul, li { padding:0; margin:0; } ul li { list-style:none; background: url(bullet-reversed.gif) no-repeat right center; padding-right:20px; text-align:right; } </style> </head> <body> <ul> <li>This is a list item</li> <li>This is a list item </li> <li>This is a list item</li> <li>This is a list item </li> <li>This is a list item</li> <li>This is a list item </li> </ul> </body> </html>