html - 自定义 HTML 列表项目符号和文本换行/对齐

Question

我正在尝试创建自己的自定义 HTML 列表项目符号，不幸的是我很难对齐文本，有什么提示吗？

我无法更改标记，项目符号必须位于 anchor 标记内:

<li> 
   <a href="#"> <div class="bullet"></div> Text </a> 
</li>

这是一个包含我的自定义项目符号和标准项目符号的屏幕:

和 JSFiddle:http://jsfiddle.net/XSUYE/

Answer 1

这是一个工作示例:http://jsfiddle.net/77PFX/

它使用 :before伪元素，它可以稍微清理您的标记。项目符号是绝对定位的，因此它们不会干扰 <li> 中内联内容的流动。 .

HTML

<ul class="list">
    <li><a href="#">Text</a></li>
    <li><a href="#" style="color: red">Text that is a bit too long and shows up under our "bullet"</a></li>
    <li><a href="#">Text</a></li>
</ul>

CSS

ul {
    width: 200px;
}

.list {
    list-style-type: none;

}

.list li{
    list-style-type: none;
    position: relative;
    padding-left: 5px;
}
.list li:before{
    content: ' ';
    display: block;
    width: 10px;
    height: 10px;
    background: #eee;
    border: solid 1px #aaa;
    position: absolute;
    top: 3px;
    left: -15px;
}

截图