Question

我试图为<li>元素添加一个awesomefont列表样式。

<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才有效是阻止）。

自定义列表样式不起作用

3 个答案: