1

通常のマークアップを含むリンクのリストがあります

    <ul>
        <li>
            <a href="">a link</a>
        </li>
        <li>
            <a href="">a really long link that wraps
                over two or more lines
            </a>
        </li>
        <li>
            <a href="">a link</a>
        </li>
        <li>
            <a href="">a link</a>
        </li>
    </ul>

スプライトを使用して、リンクの左側にアイコンを表示し、リンク テキストを右側に表示したいと考えています。

ICON    some text that wraps and
        some more text that wraps

マークアップを追加せずにこれを行いたいと思います。IE8をサポートする必要があるため、background-sizeを使用できないことを意味すると思います

疑似要素を使用してみました-背景を疑似要素に追加します。実際のコンテンツは独自の要素にないため、これは機能しません。そのため、アイコンの下にラップしないようにする方法はないようです。

何か不足していますか？これを適切なセマンティックな方法で機能させる方法はありますか? または、スパンを追加する必要がありますか?

4

2 に答える 2

1

これを見てください：

li {
    margin-left: 25px; // |n| px must be equal to li a:before margin-left |n| px
    float: left;
    clear: left;
}

li a:before {
    content: ' ';
    margin-left: -25px; // here ...
    width: 25px;
    height: 50px;
    float:left;
    background: url('http://www.google.com/images/srpr/logo3w.png');
}

フィドル: http://jsfiddle.net/vhSG6/6/

于 2012-10-19T08:00:57.590 に答える
0 
​li a:before {
  content: '-';
  color: transparent;
  width: 20px;
  margin-right: 8px;
  display: inline-block;
  background-image: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5')
}​

http://jsfiddle.net/vhSG6/

于 2012-10-19T07:33:48.553 に答える