13

所以我有

<ul>
  <li>Hello</li>
</ul>

和

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

看起来像

在此处输入图像描述

如您所见，文本和图像元素<li>没有垂直对齐（图像高于文本），我尝试对其应用 line-height 和 vertical-align （注释掉的代码），但它甚至没有。有没有办法实现良好的对齐？

4

5 回答 5

22

填充只会影响元素内部的任何内容 - 在您的情况下是文本。

唯一可用的位置调整属性是list-style-position，但唯一允许的值是inherit,inside或outside。最常见的做法是使用：

list-style: none;

然后应用所需的图像作为<li>背景

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}
于 2013-02-05T14:28:00.517 回答
2

你可以有

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
于 2015-02-20T12:45:24.510 回答
1

可以为 li-tag 定义 img-tag 或 background: url(..) 而不是“list-style-image”

于 2013-02-05T14:24:30.400 回答
0

当每个列表项只有一行时，您可以padding-bottom向li元素添加一些

于 2013-02-05T14:19:05.567 回答
0

我还需要在背景属性中添加“无重复”

于 2013-10-19T23:39:57.057 回答