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

Quickest way is with a background image (set on the li or a, depending your design needs):

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

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

于 2013-06-18T03:44:44.637 に答える
3

css:afterプロパティを使用してこれを実現できます。

デモhttp://jsfiddle.net/yeyene/dnPN4/

CSS

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

IE 9+ およびすべての主要なブラウザーは をサポートしますが:after、IE 7 以下ではサポートされておらず、IE 8 は DOCTYPE が宣言されている場合にのみサポートされます。

于 2013-06-18T04:05:03.037 に答える