自定义列表样式不起作用

Question

我试图为<li> 元素添加一个很棒的字体列表样式。

<ul>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
    <li>
    <i class="fa fa-circle-o"></i>
    <a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
    </li>
</ul>

和css

li{
    list-style:none;
}

但是当我们调整窗口大小时，li 文本会在列表样式的圆圈下方，这是不可接受的。我认为它应该在列表样式圈之后开始，即使文本进入第二行。

有人可以建议我一个更好的方法吗？ jsfiddle：http://jsfiddle.net/n6bf3/

Answer 1

列表标记的行为不像列表标记的原因是因为您使用的标记不是真正的列表标记，它是列表元素内部的一个元素。字形和文本在同一个容器中，因此根据normal flow 包裹在它下面。

您可以拼凑一些方法使其按预期工作，但仅使用真正的标记会容易得多，并且会产生更清洁、更易于维护的代码。

<li>
<a rel="tooltip" data-original-title="To not influence reports" title="">Do not track Events coming from your IP</a>
</li>

使用默认圆圈：

li{
    list-style: circle;
}

http://jsfiddle.net/UselessCode/B842c/

如果您必须使用自定义图像而不是默认标记之一，您也可以使用标记样式来做到这一点：

li{
    list-style-image: url("circle-bullet.png")
}

http://jsfiddle.net/UselessCode/fPBrS/

Answer 2

有几种方法可以做到这一点。基本上，如果你想让圆圈显示在锚文本旁边，即使文本已经换行，你本质上是希望 CSS 按行布局。所以在这种情况下，这是最简单的方法：

li{
    list-style:none;
    display:table-row;
}

li *
{
    display:table-cell;
}

http://jsfiddle.net/mL34R/1/

但是，css 中的表格布局可能很挑剔，所以这是另一种将元素彼此相邻放置为内联块的方式，但允许锚内容正常换行：

li{
    list-style:none;
    white-space:nowrap;
}

li i
{
    display:inline-block;
    vertical-align:top;
}

li a
{
    display:inline-block;
    white-space:normal;
}

http://jsfiddle.net/pV4cp/

Answer 3

http://jsfiddle.net/n6bf3/2/

i {
    position: absolute;
}
a {
    display: block;
    padding-left: 16px;
}

定位i 绝对会使其脱离a 的方式，因此a 可以得到它的padding-left（只有在a 被阻止时才能正常工作）。