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

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

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

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 回答