Vertical UL with Text On The Left Side Of The LI

Question

Is it possible to make a vertical <ul> that displays the text on the left side of the list?

The only example I can think of would be something like the Facebook timeline where you would have list items on the right side like normal and then list items on the left that have the list items. How would I do a list like the list items on the left? (I understand that this isn't how the timeline is coded, but it's just the only visual example I could think of).

Answer 1

Yes...use CSS:

<style>
ul {direction: rtl;}
</style>

If you'd like to alternate left and right, you can put it into a class:

<style>
.bulletonleft { direction:ltr; }
.bulletonright { direction:rtl; }
</style>

<ul>
    <li class="bulletonleft">Element 1</li>
    <li class="bulletonright">Element 2</li>
    <li class="bulletonleft">Element 3</li>
    <li class="bulletonright">Element 4</li>
    <li class="bulletonleft">Element 5</li>
    <li class="bulletonright">Element 6</li>
</ul>