html - 在包含内容的列表中包含一个箭头并移动到 li 内容上

Question

我想移动我的 li 的内容。

我在 li 之前添加了箭头:

ul {
    list-style-type: none;
}

li:before {
    content: "\25ba\00a0";
}

看起来很糟糕:

http://jsfiddle.net/Vj8dd/293/

有可能解决这个问题吗？

Answer 1

您可以使用 position: absolute 放置图标。

在列表项上添加一些左缩进，这样它总是从前面几个像素开始，并且文本在换行后正确对齐。

ul {
  list-style-type: none;
}

li {
  position: relative;
  padding-left: 20px;
}

li:before {
  content: "\25ba\00a0";
  position: absolute;
  left: 0;
  top: 0;
}

<form>
  <div style="max-width:200px;">
    <ul>
      <li>foo</li>
      <li>basdasdasfs fgsdfgrfgfg fgf gdf g sdfgd fgdf fg fg r</li>
    </ul>
  </div>
</form>