将具有 list-type:outside 样式的 <li> 元素与内容边框一致地对齐

Question

我想知道是否存在一种简单而可靠的方法来设置 ul 和 li 元素的样式，以便在使用 list-style: outside 时，li 元素与其上方的内容对齐，或者与它所在的内容框对齐，没有边距或填充。

考虑一下：（http://jsfiddle.net/Um5L9/2/）

<div id = "container1">

    <span>Something</span>

    <ul>
        <li>
            <div>One</div>
            <div>Some more text or content here</div>
        </li>

        <li>
            <div>One</div>
            <div>Some more text or content here</div>
        </li>

        <li>
            <div>One</div>
            <div>Some more text or content here</div>
        </li>

    </ul>

</div>

body {
    margin:20px;
    border: 1px solid #333;
}

ul {
    list-style: square outside none;
}

结果将是这样的：

我想要的是这个：

只需添加一些填充即可轻松完成：

ul {
    list-style: square outside none;
    padding-left:15px;
} 

但是肯定有比设置像素边距更好的方法。也许适用于所有字体大小的东西？

谢谢！

编辑

只想补充一点，我需要 li 的两个孩子都排在彼此下面

Answer 1

这是一种看起来相当健壮并使用伪元素的方法。

应用以下 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;
}

见演示：http : //jsfiddle.net/audetwebdesign/SfGbW/

注意：查找所需列表标记的 ISO 代码。