html - 使用自定义元素符号时的样式问题

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 ) 是当列表项中的文本跨越多行时，它没有与左侧的其他文本正确对齐

当子弹绝对定位时，它会按我想要的方式工作(jsfiddle)。是否可以在没有绝对定位元素符号的情况下解决此问题？

Answer 1

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