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;
}

有关实例，请参阅此fiddle。

Answer 2

试着改变：

.moutlook {
    list-style-image: url(../images/icon.png);
    padding-top: 10px
}

要：

.moutlook {
    list-style-image: url(../images/icon.png);
    padding-top: 5px
    padding-bottom: 5px
}

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

2 个答案: