Text align of an unordered list item

Question

I'm wondering if there's any way to make the text of an unordered list item appear as a "column" by the side of the standard disc/dot list item icon? Made a pair of screenshots:

This is how it looks when using a standard unordered list with some text inside the list item (li):

And this is how I want it to look:

Is this possible without any image/div hacks? ;-) I've searched around to see if there's any standard CSS setting for it, but I couldn't seem to find any.

Thanks a lot in advance!

All the best,

Bo

Answer 1

list-style-position is the property you are looking for. It works in all browsers. (see MDN for more details)

ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}

But actually outside it is the default value. You probably overwrite it somewhere else.