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

スプライトでこれを達成するのは非常に困難です。画像がそれ自体である場合、明らかな解決策は次のことです。

.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 に答える