Html 使用自定义项目符号时对齐换行的li文本

我有一个小问题，想知道是否有人能想出一个快速修复

问题

我有一个ul-of-lis，它使用li:before{content:etc.的自定义项目符号。我试图让单词正确对齐-你可以在第四个li项上看到，当单词换行到下一行时，它们不是从单词下开始，而是从项目符号下开始

尝试的修复

• 李：以前，我试过其他方法，但是。。。
  • 我不想使用内置的li bullet样式（它们很难看）
  • 我尝试过使用字体可怕的子弹样式，但同样的事情发生了（我想他们也使用li:before方法）
  • 我不想手动将第二行隔开，因为要更改浏览器大小等等
• 使用li:before方法，我尝试使用绝对定位将项目符号向左移动：3px（正如在类似的stackoverflow问题中建议的那样），但也没有成功

示例

单击此处查看问题的演示：

（以下代码缩写）

解决方案会很好，但即使是想法也会受到赞赏，谢谢！

你可以做到

body.sidebar{
背景色：#ccc；
填充：20px；
宽度：330px；
浮动：对；
}
.小组负责人{
背景色：#53d；
颜色：#fff；
填充：.3em；
文本对齐：居中；
字体系列：@fancyfont；
字体大小：1.2米；
}
.小组委员会{
颜色：#aaa；
背景色：#fff；
}
.面板主体ul{
显示：内联；
填充：0；
}
.面板主体ul li{
填充：0.5em 0.5em 0.5em 1.5em；
边框底部样式：实心；
边框颜色：#ccc；
列表样式类型：无；
保证金：0；
位置：相对位置；
}
.面板主体ul li：最后一个孩子{
边框底部样式：无；
}
.面板主体ul li a{
文字装饰：无；
}
.面板主体ul li a：已访问{
颜色：#000；
}
.面板主体ul li：之前{
内容：“\27A8\00a0\00a0”；
位置：绝对位置；
左：7px；
}
.面板主体ul li：悬停，
.面板主体ul li：悬停a{
背景色：#53d；
颜色：#fff；
}

你的菜单

您也可以在

a

标记上使用

display:table

属性，请参阅

.panel-body ul li {
    list-style-type:none;
}
.panel-body ul li:before {
    content:"\27A8\00a0\00a0";
}