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.

Answer 2

You can simply code it like this:

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}