Question

我有一个列表，该列表使用：before添加一个十六进制图标（勾号和叉号）。

但是，当文字换行到第二行时，它位于图标下方，我希望它与文字保持相同的缩进线。

我尝试过：

list-style-position: outside;

没有喜悦，我认为这归结于使用：before，我理想地希望保留它。

这是一个小提琴： http://jsfiddle.net/cfboxrad/363/

任何帮助都会很棒。

谢谢

Answer 1

给定左边的复选标记-18边距，它应该代替隐藏的子弹，如果没有用，也应将跨距的边距删除。

def remove(duplicate):
    final_list = []
    found = set([])
    for num in duplicate:
        lst = []
        for element in num:
            if element not in found:
                found.add(element)
                lst.append(element)
        final_list.append(lst)
    return final_list

Answer 2

您正在使用[ ['Acura', 'Alfa Romeo', 'Aston Martin', 'Audi'], ['Bentley', 'BMW', 'Bugatti', 'Buick'], ['Cadillac', 'Chrysler', 'Citroen'], ['Dodge', 'Ferrari', 'Fiat', 'Ford'], ['Geely', 'Honda', 'Hyundai', 'Infiniti'], ['Lamborghini'], ['Koenigsegg', 'Maserati'] ]元素，因此可以将其绝对放置在.review-list { list-style-type: none; } .review-list--pro, .review-list--con { line-height: 20px; padding-bottom: 7px; } .review-list--pro:before { content:"\2714\0020"; color: #87c44a; margin-left: -18px; } .review-list--con:before { content:"\2717\0020"; color: #f44336; margin-left: -18px; }项目上。在li上使用填充：

pseudo

li

您的小提琴已更新： http://jsfiddle.net/cfboxrad/379/

Answer 3

list-style-position是用于列表元素的属性。仅当使用默认列表项目符号或using graphical bullets via list-style-image时，它才能很好地工作。

一个简单的解决方案是在伪元素上使用负的左边距：

.review-list {list-style-type: none;}
.review-list span{margin-left:25px;}

.review-list--pro, .review-list--con {
  line-height: 20px;
  padding-bottom: 7px;
}

.review-list--pro:before {
  content:"\2714\0020";
  color: #87c44a;
  margin-left: -1em;
}
.review-list--con:before {
  content:"\2717\0020";
  color: #f44336;
  margin-left: -1.1em;
}

<ul class="review-list">
  <li class="review-list--pro"><span>this is my textthis is my textthis is my texthis is my textthis is my textthis is my texttthis is my textthis is my textthis is my text</span></li>
  <li class="review-list--pro">this is my text</li>
  <li class="review-list--pro">this is my text</li>
  <li class="review-list--pro">this is my text</li>
</ul>

<ul class="review-list">
  <li class="review-list--con">this is my textthis is my textthis is my textthis is my textthis is my textthis is my textthis is my textthis is my textthis is my text</li>
  <li class="review-list--con">this is my text</li>
  <li class="review-list--con">this is my text</li>
  <li class="review-list--con">this is my text</li>
</ul>

使文本内联并缩进列表

3 个答案: