无法使用自定义项目符号设置<li>元素文本的样式

Rahul Desai 发表于 Dev

拉胡尔·德赛（Rahul Desai）

我已<ul>使用自定义项目符号设置了列表样式，如下所示。

问题是我希望文本显示如下图所示：

在此处输入图片说明

因此，基本上，溢出的文本不应在项目符号的正下方。我在SO上尝试了这里可用的解决方案，但在我的情况下却没有用。

ul{
  width: 300px;
  border: 1px solid black;
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  list-style: none;
  list-style-position: inside;
  position: relative;
  margin-left: 1em;
}

ul li:before {
  content: '\25A0';
  color: #3023AE;
  line-height: 0;
  font-size: 1.5rem;
  vertical-align: middle;
  padding-bottom: 0.5rem;
}

<ul>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
  <li>Four million Americans are suffering from the after effects of stroke</li>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
</ul>

我该如何解决？

Vipin伦切拉

你可以用这种方式

    ul{
      width: 300px;
      border: 1px solid black;
      margin-left: 0;
      list-style-type: none;
      padding-left:0px;
    }

    ul li {
      list-style: none;
      position: relative;
      margin-left: 1em;
      display:block;
      background:url('http://i.imgur.com/YR9XMuc.png') no-repeat center left ;
      padding-left:30px;
    }

<ul>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
  <li>Four million Americans are suffering from the after effects of stroke</li>
  <li>Tissue death, a dangerous side effect, often results from stroke</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。