javascript - 如何使用不允许文本在其下方流动的浮动图标实现列表项？

Question

我试图覆盖什么

不希望的行为

我想得到什么

期望的行为

!IMPORTANT: Li 元素不应该有左填充。或者他们应该自动获得它而不给他们附加课程。

由于下面描述的情况，我想要这样的方式。想象你有 50 个列表元素的列表，其中 30 个应该有图标（和左填充） 20 没有。您必须将类附加到每个具有图标或没有图标的列表元素，以使其没有填充。

当然我们可以使用 JavaScript，但是 css 呢？我见过这样的例子，但已经失去了它。

score 1 · Accepted Answer

1

就像是：

li .icon{margin-left:-20px;position:absolute;}

于 2013-10-20T11:59:45.300 回答

score 0 · Accepted Answer

另一种方法是，如果您可以将其他内容包装在另一个容器中，如下所示：

<li>
    <i class="icon">❤&lt;/i>
    <span>Lorem ipsum dorem fasid ipsum dorem fasid</span>
</li>

...你可以inline-block这样使用：

li > * { display:inline-block; vertical-align:top }
li > span { max-width:90% }

在此处输入图像描述

width:90%可以调整，只要确保为图标留出一些空间。

score 0 · Accepted Answer

0

尝试这个：

ul {
list-style: none url('path of image');
}

于 2013-10-20T11:52:31.570 回答

score 0 · Accepted Answer

你也可以试试这个

ul li {
      list-style: url(path of image);
      list-style-position: outside;
}

4 回答 4