How to right align text in a list in HTML

In this article, you’ll learn how to right align text in a list, just using CSS, so you can customize lists for your web projects!

What’s up programmer, how are you? Let’s learn something new!

By default, HTML lists are left-aligned, and eventually we need them to be right-aligned.

And this can be easily solved with the text-align property, with the value of right

The same property that we align the texts

Let’s take a practical example:

<ul>
 <li>These</li>
 <li>items</li>
 <li>to</li>
 <li>the</li>
 <li>right</li>
</ul>

Let’s now go for the CSS needed to right-align the list:

li {
 text-align: right;
}

Okay, this way the list will be on the right 😀

You can also remove bullets, with list-style and the value of none

And of course, limit the width to suit your layout

Note that some HTML elements benefit from text-aligning to align to some position.

For example, if we want to center some text, we must add the value center

Which consequently will serve for the lists

And of course, there are tests too, programming (or front-end) is that: test, test and test

Then choose the best option for your specific case

Conclusion

In this article we learned how to right align text in a list

We use the property that normally aligns texts, text-align, with the value of right.

And with that we conclude our goal, of course you must now adapt the styles of your project so that the list meets the layout

Want to learn more about CSS? Click here!