MillerMedia
MillerMedia

Reputation: 3671

Vertical UL with Text On The Left Side Of The LI

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).

Upvotes: 0

Views: 340

Answers (1)

Nicholas Kouvatsos
Nicholas Kouvatsos

Reputation: 643

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>

Upvotes: 1

Related Questions