1

これは、私のウェブサイトに取り入れようとしているサイドバーのフィドルの例です。 http://jsfiddle.net/PF35v/9/

3 番目の項目にカーソルを合わせると、ホバー時にサブメニューが表示されます。
サブメニューは次のように書かれています。

<ul id="side-menu">
            <li><img src="http://www.downes.ca/images/RightArrow.gif" alt="sub menu image (assume this is some kind of arrow" style="width:48px; height:48px" />
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 1</li>
        </ul>

最初のliアイテムは画像で、残りの 3 つはテキスト アイテムです。

テキスト付きのアイテムを個別に配置したい。liつまり、これらは画像付きの最初のアイテムの後に来る必要はなくli、下の図に示すようにフォームに配置できます。

ここに画像の説明を入力

これはどのように達成できますか？

4

1 に答える 1

0

まあ、あなたは絶対にそれらすべてを配置することができます. しかし、より良い方法は次のようなものかもしれません:

#side-menu { margin: 0; padding: 0 0 0 50px; list-style: none; }
#side-menu>li { margin: 0 0 20px; }
#side-menu>li:first-child { float: left; margin: 0 0 0 -50px; }

の左側のパディングulはリスト項目を押し上げ、フロートと組み合わされた負のマージンは矢印を再び引き戻します。

そうは言っても、もっと良い方法があります: 背景画像です。私はこのようなことをします：

#side-menu { background: url(/images/RightArrow.gif) no-repeat left; margin: 0; padding: 0 0 0 50px; list-style: none; }
#side-menu>li { margin: 0 0 20px; }

最初の を削除しliます。

于 2012-08-12T11:22:24.963 に答える