1

我一直在努力让它工作很长时间，我完全被难住了。网上有很多关于如何制作基本 CSS 列表菜单的文章，但我想做一个看起来像这样的文章：

Line 1          >>
Line 2          >>
Line 3          >>

每一行都是一个链接（文本、空格和箭头）。

我已经尝试了我能想到的一切，但没有任何效果。我敢肯定，如果您知道自己在做什么，这很容易做到，那么任何人都可以帮助我吗？

这是我目前拥有的：

<style type="text/css">
    ul.menu {
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

    ul.menu > li {
        display: block;
        width: 100%;
    }

    ul.menu > li:hover {
        color: red;
    }

    ul.menu > li a {
        display: block;
        width: 100%;
    }

    ul.menu > li > a:hover {
        background-color: #F7F7F7;
    }
</style>

<ul class="menu">
    <li>
        <a href="">Line 1</a>
    </li>
    <li>
        <a href="">Line 2</a>
    </li>
    <li>
        <a href="">Line 3</a>
    </li>
    <li>
    <a href="">Line 4</a>
    </li>
</ul>
4

2 回答 2

3

您可以使用 css:after属性来实现这一点。

演示http://jsfiddle.net/yyene/dnPN4/

CSS

ul.menu > li a:after  { 
    content:" »";
}

IE 9+ 和所有主要浏览器都将支持:after，但是 IE 7 或更低版本不支持它，IE 8 仅在声明了 DOCTYPE 的情况下支持它。

于 2013-06-18T04:05:03.037 回答
3

最快的方法是使用背景图像（根据您的设计需要设置在li或上）：a

background:transparent url("http://placehold.it/25x25") right center no-repeat;

http://jsfiddle.net/daCrosby/8aTvn/1/

于 2013-06-18T03:44:44.637 回答