使用自定义项目符号时的样式问题

Question

我有这样的简单列表

<ul>
    <li>....</li>
</ul>

造型

ul {
    list-style: none;
}

li:before {
    background-color: #1282CB;
    border-radius: 6px;
    height: 6px;
    vertical-align: middle;
    width: 6px;
    content: '';
    display: inline-block;
    margin-left: -15px;
}

我遇到的问题（jsfiddle）是，当列表项中的文字跨越多行时，它与左侧的其他文本 <没有正确对齐/ p>

当子弹被绝对定位时，它可以按照我想要的方式工作（jsfiddle）。是否有可能在没有绝对定位子弹的情况下解决这个问题？

Answer 1

您可以将margin-left从-15px更改为-12px。工作示例here。

Answer 2

<强> FIDDLE

http://jsfiddle.net/stu80zre/9/

删除职位

<强> CSS

ul {
    list-style: none;
}


li:before {
    background-color: #1282CB;
    border-radius: 6px;
    height: 6px;
    vertical-align: middle;
    width: 6px;
    content: '';
    display: inline-block;
    margin-left: -24px;
    top: 7px;
}
li span{
   margin-left: 15px; 
}

Answer 3

尝试减少边距左边

li:before {
    background-color: #1282CB;
    border-radius: 6px;
    height: 6px;
    vertical-align: middle;
    width: 6px;
    content: '';
    display: inline-block;
    margin-left: -10px;
}

http://jsfiddle.net/stu80zre/7/