Html 自定义列表样式不起作用

我正在尝试向

元素添加一个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>

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

有谁能给我建议一个更好的方法吗？

---

Jsfiddle:

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

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

li *
{
    display:table-cell;
}

但是，css中的表布局可能会很挑剔，因此这里有另一种方式将元素作为内联块彼此相邻放置，但允许锚定内容正常包装：

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

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

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

---

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

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

li *
{
    display:table-cell;
}

但是，css中的表布局可能会很挑剔，因此这里有另一种方式将元素作为内联块彼此相邻放置，但允许锚定内容正常包装：

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

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

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

定位

i

绝对会使其脱离

a

的路径，因此

a

可以使其

填充物向左

（只有

a

被阻塞时才能正常工作）。

---

定位

i

绝对会使其脱离

a

的方式，因此

a

可以使其

填充位置向左

（仅当

a

是块时才正常工作）。

列表标记之所以不像列表标记，是因为您使用的标记不是真正的列表标记，它是列表元素中的一个元素。glyph和文本位于同一容器中，因此它根据需要包装在该容器下

您可以通过各种方法使其按预期工作，但只使用真正的标记会更容易，并产生更干净、更可维护的代码

<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-image: url("circle-bullet.png")
}

---

列表标记不像列表标记，原因是您使用的标记不是真正的列表标记，而是列表元素内部的元素。glyph和文本位于同一容器中，因此它根据需要包装在该容器下

您可以通过各种方法使其按预期工作，但只使用真正的标记会更容易，并产生更干净、更可维护的代码

<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-image: url("circle-bullet.png")
}

---

@bjb568，如果您转到JSFIDLE，您可以看到列表样式为圆形的列表。现在，如果调整窗口大小，使该行进入第二行，则该行位于圆的正下方（列表样式）。但它应该有一个缩进。如果您查看stackoverflow页面中的

相关的
部分，就在该注释的右侧，您可以看到数字部分是一个单独的部分，第二行文本不在数字下方开始。这就是我想要的。@bjb568，如果您转到JSFIDLE，您可以看到列表样式为圆形的列表。现在，如果调整窗口大小，使该行进入第二行，则该行位于圆的正下方（列表样式）。但它应该有一个缩进。如果您查看stackoverflow页面中的
相关的
部分，就在该注释的右侧，您可以看到数字部分是一个单独的部分，第二行文本不在数字下方开始。这就是我想要的。inline-block有空间问题
i
和
a
之间有空格。这取决于您是否认为这是个问题。表行方法没有这个空间，但imo看起来更糟。您可以添加右边的边距：-3px；如果你特别关注li i风格，我会将它改为li i风格。对于一些
，我使用虚线作为底部边框的文本装饰。因此，如果文本换成另一行，那么整个文本下只有一行。这可能是另一个问题。。我认为您不会实现一个自定义下划线，至少不会在css中进行包装。当文本转到第二行时，包含的块会增长。好的，有一种方法，但仍然有点不受支持：内联块有空间问题
i
和
a
之间有空格。这取决于您是否认为这是个问题。表行方法没有这个空间，但imo看起来更糟。您可以添加右边的边距：-3px；如果你特别关注li i风格，我会将它改为li i风格。对于一些
，我使用虚线作为底部边框的文本装饰。因此，如果文本换成另一行，那么整个文本下只有一行。这可能是另一个问题。。我认为您不会实现一个自定义下划线，至少不会在css中进行包装。当文本转到第二行时，包含的块会增长。好的，有一种方法，但仍然有点不受支持：将特定的度量值（如16px）放入样式中意味着现在不考虑字体的大小。如果使用不同的圆形字体，则必须手动调整此样式。如果某些列表中没有一些标记，则无法正常工作。@Mike您还是要设置字体大小。如果需要，可以使用预处理器变量。@user1012181您可以给
li
a
min height:18px
。将特定的度量值（如16px）放入样式中意味着现在不考虑字体的大小。如果使用不同的圆形字体，则必须手动调整此样式。如果某些列表中没有一些标记，则无法正常工作。@Mike您还是要设置字体大小。如果需要，可以使用预处理器变量。@user1012181您可以执行以下操作