Left align multiple line list items

Josh Sherman
1 min read
Software Development CSS WordPress

I don’t claim to know all the things, and this post is definitely something that I’m pretty sure nearly everybody on the planet knew about but me.

The problem I was attempting to solve recently is that I had a list and the left alignment of the multiple lined list items was wrapping below the list marker like this:

Seems the boilerplate I was using for a WordPress theme was the culprit and was setting the list-style-position to inside while the default is outside.

Or I messed something up along the way ;)

Either way, even after all these years, the problem was fairly new to me and resulted in a bit of digging into the available style attributes for HTML lists.

The solution for my problem was to simply set list-style-position: outside and call it a day:

Not every day that I run into “new to me” CSS so I wanted to document things in case it ever comes up again. Seeing as I can’t even think of a scenario where I’d want to explicitly set list-style-position to inside, there’s a good chance I’m going to end up forgetting about this :P

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

About Josh

Husband. Father. Pug dad. Born again Linux user. Founder of Holiday API, Backend Engineering Manager and Emoji Specialist at Mailshake (WE'RE HIRING!), and author of the best damn Lorem Ipsum Library for PHP.

Currently Reading

Pears and Perils
Antifragile: Things That Gain from Disorder
Code Girls: The Untold Story of the American Women Code Breakers of World War II

Previous Reads

Buy Me a Coffee Become a Sponsor

Related Articles