Align elements with list-type:outside style to the content border consistently

Question

I wonder if there exists an easy and solid way to style ul and li elements so that when using list-style: outside , the li elements lign up with the content above it, or wit

Answer 1

I suggest using something like this:

ul {
    list-style-position: inside;
    margin:0px;
    padding:0px;
}

http://jsfiddle.net/Um5L9/4/

Answer 2

Here is one way of doing it that appears to be fairly robust and uses pseudo elements.

Apply the following CSS:

body {
    margin:20px;
    border: 1px solid #333;
}
ul {
    list-style: none;
    margin:0px;
    padding:0px;
    font-size: 1.0em;
}
ul li {
    margin-left: 0em;
    position: relative;
    padding-left: 1.0em;
}
ul li:before {
    content:"\2022";
    font-size: 1.0em;
    position: absolute;
    top: 0;
    left: 0;
}

See demo at: http://jsfiddle.net/audetwebdesign/SfGbW/

Note: Look up the ISO code for the desired list marker.