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.

Related Articles