WordPress unordered Lists with custom alignment with CSS

By default, WordPress unordered lists are aligned to the left with usage of a tiny bit of CSS and HTML it can aligned to the right side.

Sometimes we need an unordered list partly to be aligned to the left and page numbers, chapter numbers aligned to the right.

HTML code for Wordpress unordered lists to align to the right

From the HTML PART we WILL use a <ul> list and format it with an ID.

Using the following bit of HTML markup (in HTML mode) in WordPress will make the texts or numbers in unordered list to be aligned to the right:

<ul id=”My List“>

<li> <span> Page number </ span> Your Text Contents </ li>
<li> <span> 3 </ span> Introduction </ li>

</ul>

Obviously, you can change the ul ID (marked red) with any name you want. However, you have to change it in next step in the CSS as well.

CSS code needed for custom alignment of WordPress unordered list

In the style.css file of your theme in use, add the following codes to get right alignment of the unordered list:

# My List {
margin: 1px;
padding: 10px;
list-style: none;
width: 550px;
border: 2px solid # 000000;
background: #eeeeee ;
}

# My List span {
float: right;
}

# My List li {
float: right;
}

You can change the green colored values as per your need.

Example of normal left aligned unordered list :

• Unordered list item 1
• Unordered list item 2

Example of right aligned unordered list after this CSS trick: