Left align multiple line list items
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:
- This is a short list item.
- This is an extremely long and wordy list item that will surely wrap to the next line because it is so damn long and obnoxious and I'm just going to keep typing even though I just realized that things would have been better if I had just went ahead and copied in some lorem ipsum.
- Another short one.
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:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit. Maecenas accumsan augue at accumsan mollis. Fusce congue nec diam ac convallis. Vivamus fermentum ligula nec risus posuere, vestibulum ultrices nulla varius. Duis tempus sem ut sapien efficitur venenatis. Suspendisse dignissim risus sit amet lobortis pretium. Pellentesque sed felis sit amet orci aliquet tincidunt sed quis nisl.
- Curabitur tincidunt, eros sed molestie consectetur.
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