How to align list items vertically in HTML lists with CSS?

📂 Category: HTML/CSS

🖺 Last modified: 26th May 2020

💻 Experience: Beginner

🕑 Read Time: 3 min

HTML lists are some of the most used HTML elements in web development, but also in writing page and post content. In WordPress, lists come with some basic default styling applied by the theme. In most of the cases you’ll want to modify the default list styling to meet your design needs. This article will teach you how to style HTML lists using CSS, and make’em look exactly as you imagined. Therefore, the first thing you want to do is align list items vertically.

Aligning HTML lists in WordPress

Are you editing a WordPress theme and styling a HTML list in it? Most importantly, make sure you don’t break the theme by editing the default stylesheet. Also make sure you don’t loose your custom code after updating the theme.

The best practice would be to add your own stylesheet CSS file to the theme or child-theme you are working on. If you haven’t already done that already, read our article on Adding custom CSS files to WP themes first.

How to align HTML lists vertically using list-style-position CSS property?

WordPress theme developers often don’t pay too much attention to styling HTML lists. This makes lists in site content look rather basic. By adding few simple CSS properties to the list style, you can make it stand out in the content.

In many WP themes default vertical list aligment property list-style-position is not set. This property defines the position of list bullet points (•) in relation to the text. If not set, the default value of the list-style-position property will be inside. In that case the whole list (both bullets and text) will be aligned completely to the left. This style makes lists with items that span in two or more lines harder to read. Also, visually the list doesn’t look too good.

Align list items vertically

Comparison of an unstyled HTML list (left) and a vertically aligned HTML list (right).

Vertical align list items with CSS using list-style-position property

We’ll easily change the HTML list vertical alignment by adding the CSS property list-style-position with the value outside to it. Bullet points will now align absolutely to the left and multi-line list items will align verticaly after the bullets. The list already looks better and it’s easier to read.

Now we can add few more CSS properties tho furthermore improve the HTML list basic formatting. Let’s add some padding to the left of the list to distance a bit the list from the content edge. Further, adding some bottom margin to the list items will improve readability even more.

This is how the CSS properties for HTML list alignment in our example look like:

ul {
list-style-position: outside; /* Aligns the list vertically */
padding-left: 30px; /* Optional */
}

li { margin-bottom: 15px; /* Optional */ }

This styling applies both to unordered <ul> and ordered <ol> lists. In our example we styled an unordered HTML list. If you are styling an orderd list replace the ul selector in the code above with the ol selector.

Styling HTML lists furthermore with CSS

This example was just the first step to styling your HTML lists to perfection. Simmilary, by adding a couple more CSS properties to your list CSS style you can achieve much more. You could format your lists into columns or change color and shape of bullet points to make the list stand out even more.

Follow the links below for more advices on styling HTML lists: