Question

我有一个带有ususal标记的链接列表

    <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 - 所以我认为这意味着我不能使用背景大小

我尝试过使用伪元素 - 将背景添加到伪元素中。这不起作用，因为实际内容不在其自己的元素中 - 所以似乎没有办法使它不包裹在图标下。

我错过了什么吗？有没有办法以良好的语义方式使这项工作？或者我必须添加跨度？

Answer 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/

Answer 2

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/

使用Sprite作为链接列表上的图标

2 个答案: