Question

有没有办法将图像移动到使用backgorund-image属性的位置？我在我的CSS中有这个元素，你会从图像中看到箭头没有与文本对齐。我需要把它们移下来？非常感谢

抓斗：

http://img143.imageshack.us/i/ie7listimage.png/

CSS

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 28px;
            list-style-image:url('../images/tick.png');
            line-height: 30px;
            text-align:justify;

    }

更新代码

HTML

<div class="footerTextContent">
          <ul>

            <li><a href="#">Some domain</a></li>
            <li>Some domain</li>
            <li>Some domain</li>
            <li>Some domain</li>
            <li>Some domain</li>
          </ul>

        </div>

CSS

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 28px;
            line-height: 30px;
            text-align:justify;

    }

.footerTextContent li
    {
            padding: 0 0 0 15px;
            background-image:url(../images/tick.png);
            background-position: left 7px;
            background-repeat: no-repeat



    }

Answer 1

而不是使用

list-style-image:url('../images/tick.png');

<ul>上的

将图片作为背景图片直接放在<li>

上

.footerTextContent li {
    background-image: url('../images/tick.png');
    background-repeat: no-repeat;
    background-position: left 5px;
}

您可以根据需要修改图像的顶部位置。

Answer 2

编辑图形本身并在其上方添加一些空白高度，否则您必须将文本包装在div中并使用类似

的内容

position:relative;
top:-2px;

或

margin-top:-2px;


<li>hello</li> //no good
<li><div>hello</div></li> //better

李图像错位

2 个答案: