李的文本理由

Question

我在UI中有一些Li项目，我想这样做，因此文本不会一直包含在蓝色项目符号中。有人知道怎么做吗。我附上了代码和图片。感谢

<ul>
    <li><i class="fa fa-check"></i><b> text:</b>text </li>
    <li><i class="fa fa-check"></i><b> text</b>text </li>
    <li><i class="fa fa-check"></i><b>Text</b> text</li>
</ul>

截图

Answer 1

您需要在css中为<li>添加填充，并为此添加背景图片。

尝试与

类似的内容

ul.teamslink {
list-style-type:none;
padding:0;
margin:0;
}
ul.teamslink li {
background: url(../images/teamlistbg.png) 12px 5px no-repeat;
padding-left:30px;
margin-bottom:1px;
color:#363636;
}

HTML

<ul class="teamslink">
   <li></li>
</ul>

Answer 2

又一种方式。

li {

  margin-left: 25px;
  position: relative;

}

.fa-check {

background: url(yourtickimage.svg) no-repeat;
width 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
left: -25px

}

下面的Gouravs回答很好，尽管你不需要保证金权利：.100em;如果你使用了gloabal重置，请确保将1em margin-left添加回ul。

Answer 3

试试这个

 li:before {
     content: '✔';   
      margin-left: -1em; margin-right: .100em;
  }

<强> FIDDLE

我希望你能实现这个目标。

Answer 4

列表项中的文本换行通常由“list-style-position：inside”引起（在大多数浏览器中是默认的） 我认为问题应该通过声明来解决：

li{
list-style-position: outside;
}

或者，如果还必须：

li{
list-style-position: outside;
text-indent: 0em;
}

祝你好运！