Question

我需要制作自定义列表样式标记。现在通过在li之前添加元素来完成，但存在一个问题。其余的行应与标记的文本对齐，例如正常的标记列表，但它们不会。

li p::before {
    content: "* ";
}

我如何为第二行，第三行等行填充，并使其跨浏览器？（IE8 +，FF3 +，Opera 11+和Crome）

Answer 1

li p:before { /* thanks Michael */
    content: "* ";
    float:left;
}
li p {
    overflow:auto;
}

也许这会奏效。我可以知道为什么你不能使用图像（简单的好奇心）？

编辑：我错了，:before在 content 之前插入伪元素，所以

<div id="wrap">

    <ul>

        <li><p>Get order of list items in a jQuery Sortable list after resort ... The trick is I would like to capture the order of the items immediately ... And I'm aware that it's also possible to assign a call-back function that fires when sorting st</p></li>
    </ul>
</div>

#wrap
{
    position: absolute;
    top: 100px;
    left: 100px;
}

li
{
    list-style-type: none;
}

li p
{
    overflow:auto;
}

li:before {
    content: "* ";
    float:left;
}

会奏效。

Answer 2

您可以将p和li设置为float：left; （example 1）

li
{
    list-style-type: none;
    display: inline-block;
}

li p
{
    display: inline-block;
}

或将显示设置为内联块（example 2）

li
{
    list-style-type: none;
    display: inline-block;
}

li p
{
    display: inline-block;
}

如何制作跨浏览器的自定义列表样式标记？

2 个答案: