0

次のメニューがあります。

CSS:

            ul.menu {
                padding: 0;
                margin: 0;
                font-size: 16px;
            }

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

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

            ul.menu > li a {
                display: block;
                background:transparent url("http://placehold.it/25x25") right center no-repeat;
                background-size: 15px 15px;
            }

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

HTML:

<div style="width: 200px; background-color: lightgrey;">
    <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>
</div>

JSFiddle: http://jsfiddle.net/8TzMc/

ここまでは良いのですが、li の左右にパディング (約 10px) が必要です。また、li の高さを少し大きくしたいと思います (そのため、行の間にスペースができます)。文章）。この行を CSS に追加しようとしul.menu > liましたが、2 つの方法でメニューが台無しになります。

  1. メニュー項目の上端と下端の間にクリックできない隙間ができるようになりました
  2. 背景画像がおかしくなった

JSFiddle: http://jsfiddle.net/HXrgq/

これはどのように修正できますか？

4

3 に答える 3

2

要素の代わりに要素に をpadding追加します。ali

ul.menu > li a { padding:10px;}

例えば

更新されたフィドル リンク

于 2013-06-18T15:53:29.647 に答える