使用列表项和图标

Question

是否可以将勾号图标保留在左侧，并将所有文本保留在一个区块中。

现在，文字位于刻度图标下，看起来并不好。

DEMO

＆＃13;

＆＃13;

li {
  list-style-type: none
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet magna purus, ut congue est
    sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris at eros consequat tincidunt.</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将display:flex添加到li，如下所示。

li {
  list-style-type: none;
  display:flex;
}

li {list-style-type:none; display:flex;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul>
        <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet
            magna purus, ut congue est sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris
            at eros consequat tincidunt.</li>
            
        <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet
            magna purus, ut congue est sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris
            at eros consequat tincidunt.</li>
</ul>

Answer 2

请试一试。

li {
  list-style-type:none;
  position:relative;
  padding-left:25px;
}
li:before{
  content: "";
  font-family: FontAwesome;
  left:0;
  top:2px;
  position:absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet magna purus, ut congue est sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris at eros consequat tincidunt.</li>
</ul>

Answer 3

您可以使用text-indent属性。设置负值等于图标占用的空间。

li {
  list-style-type: none;
  text-indent: -12px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet magna purus, ut congue est
    sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris at eros consequat tincidunt.</li>
      <li><i aria-hidden="true" class="fa fa-check" style="padding-right:0.5em;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet magna purus, ut congue est
    sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris at eros consequat tincidunt.</li>
</ul>

Answer 4

<div style="
    position: absolute;
    display: initial;
">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lacus at eros elementum, sit amet scelerisque tortor rhoncus. Donec imperdiet magna purus, ut congue est
    sollicitudin vel. Maecenas eget blandit magna. Nulla vel faucibus neque. Nam sed mauris at eros consequat tincidunt.</div>