将<li>元素与列表类型：外部样式一致地与内容边界对齐</li>

Question

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

Condider this：（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;
} 

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

谢谢！

修改

只是想补充一点，我需要李的两个孩子排在彼此之下

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/