2

我正在使用精灵图像为无序列表制作项目符号。它工作正常，但该图像显示略高于文本的起始位置。文本和图像应该在同一行。我怎样才能做到这一点？

body
    {
        font-family:Arial;
        font-size:16px;
    }
    div
    {
        width:30%;
        float:left;

    }
    .bullet {
        list-style-type: none;
        margin:0; 
        padding:0;
    }

    .magenta li 
    {
        background-image: url(images/css-sprite.png);
        background-repeat:no-repeat;
        padding-left:20px;
        background-position: 0px -2036px;

    }

和html 

<div>
    <p>Magenta</p>
    <ul class="magenta bullet">
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
        </li>
        <li>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam. 
        </li>

    </ul>
</div>
4

2 回答 2

1

使您的容器与背景图像部分的高度相同。然后您可以使用 line-height 来对齐您的文本，使其与图像垂直居中。

于 2013-02-14T18:32:17.213 回答
0

用 sprite 实现这一点非常困难。如果图像是单独的，那么明显的解决方案是：

.magenta li { background-position: 0 50%; }

但是，如果您打算保留精灵，我鼓励您实际包含另一个元素来显示图像：

<li>
    <em></em>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>

然后你可以使用绝对定位：

.bullet li {
    position: relative;
    padding: 0 0 25px; }
.bullet em {
    background: url(images/css-sprite.png) 0px -2036px no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0; }

http://jsfiddle.net/BeCQy/

于 2013-02-14T18:43:37.973 回答