将基于图形的子弹点与css对齐

Question

我已经用图标制作了一个子弹点列表,但我不能很好地对齐文本.

HTML:

<ul>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
</ul>

<ul>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
    <li class="moutlook">List</li>
</ul>

CSS:

ul li {
    font-weight: bold;
    font-size: 110%;
    margin: 0px 0 15px 45px;
    padding-top:0px;
    border: 1px solid #fff;
    line-height: 0;
}
.moutlook {
    list-style-image: url(../images/icon.png);
    padding-top: 10px
}

我已经尝试了所有类型,你可以看到,此刻它是这样的:

-------
-     -
-     -
------- List

它应该是这样的:

-------
-     - List (well in the middle)
-     -
------- 

我计划在每个上使用不同的图标,出了什么问题？

Answer 1

用background-image而不是list-style-image.首先,您必须添加这些声明以实现跨浏览器兼容性.

ul {
    list-style-type: none;  
    padding: 0px;
    margin: 0px;  
}

然后.moutlook用以下代码替换你的声明:

.moutlook {
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    padding-left: (width of your image + 7) px;
    line-height: (height of your image) px;
}

看一下这个小提琴的实例.