对齐使用自定义项目符号点时包含的li文本

Question

我遇到了一个小问题，想知道是否有人能想出一个quickfix？

问题

我有一个使用li的lis lis使用自定义项目符号：在{内容：等我试图让单词正确对齐 - 你可以看到第四个li项，当单词换行到下一行他们不是从这个词开始，而是在子弹下。

尝试修复

• 认为使用li做子弹是一个问题：之前，我尝试过其他方法，但......
  • 我不想使用内置的li子弹样式（他们很难看）
  • 我尝试使用字体很棒的子弹样式，但同样的事情发生了（我猜他们也使用li：before方法）
  • 我不想手动分隔第二行，因为更改浏览器大小而不是
• 使用li：之前的方法我尝试使用绝对定位来移动子弹：3px（在类似的stackoverflow问题中推荐）但是还没有那个工作。

示例

点击此处查看问题演示： http://jsfiddle.net/MS9Z9/

（以下代码缩写）

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

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

Answer 1

你可以做到

http://jsfiddle.net/MS9Z9/7/

.panel-body ul li:before {
    content: "➨  ";
    left: 7px;
    position: absolute;
}

.panel-body ul li {
    border-bottom-style: solid;
    border-color: #ccc;
    list-style-type: none;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 1.5em;
    position: relative;
}

将before内容置于绝对位置，使您的李相对定位，您可以自由调整自定义项目符号

另一种选择是将before内容浮动http://jsfiddle.net/MS9Z9/12/

Answer 2

您还可以在display: table标记上使用a属性，请参阅

JSFiddle