Question

使用下面的CSS，我可以使用每侧带有大括号的低-α子弹获得一个列表，但现在计数器看起来好像在内容中没有分离，所以它看起来像：

发生了什么：

(a) this is my content in the list item
that has the bullets inlined with the 
content

我想要的是什么：

(a) this is what I'd rather have that
    occurs in native lists, but doesn't
    have lower-alpha with braces

CSS：

ol {
    counter-reset: list;
    margin: 0;
    padding: 25px;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    counter-increment: list;
    content: "(" counter(list, lower-alpha) ") ";
/*    position: absolute;
    left: -1.4em;*/
}

Answer 1

看起来你有它。如果左侧有填充作为位移，您可以将伪元素 relative 绝对定位到父级：

ol {
    counter-reset: list;
    padding: 0;
}
ol > li {
    list-style: none;
    position: relative;
    padding-left: 2em;
}
ol > li:before {
    counter-increment: list;
    content:"(" counter(list, lower-alpha)") ";
    position: absolute;
    left: 0;
}

<ol>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus elit nec tortor facilisis varius. Quisque id elit sollicitudin nunc bibendum aliquet id in massa. Nam mattis est at hendrerit pretium. Vivamus tempus interdum dolor, eu dictum enim auctor sit amet. Mauris quis finibus dolor</li>
</ol>

Answer 2

如果您只是取消注释绝对位置属性，它就会起作用。

ol > li:before {
    counter-increment: list;
    content: "(" counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

在这里你可以看到一个fidle： http://jsfiddle.net/416qfvfn/

定位订单列表的低alpha子弹项目符号

2 个答案: