html - 对齐具有 list-type:outside 样式的元素与内容边框一致

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 代码。

Answer 2

我建议使用这样的东西：

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

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