html - 如何向带有背景图像的 ul/li 菜单添加填充？

Question

我有以下菜单:

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 的高度稍微大一点(这样两者之间就有一些空间文本行)。我尝试将此行添加到 ul.menu > li CSS，但它以两种方式弄乱了菜单:

1. 菜单项的顶部和底部之间现在有一个不可点击的间隙
2. 背景图片乱了

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

如何解决这个问题？

Answer 1

将 padding 添加到 a 元素而不是 li 元素。

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

例如

已更新 Fiddle link