如何使用背景图片向ul / li菜单添加填充？

Question

I have the following menu:

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/

So far so good, but I want there to be padding on the left and right sides of the li's (about 10px) and I would also like the height of the li's to be a little greater (so that there's some space between the lines of text). I tried adding this line to the ul.menu > li CSS, but it messes up the menu in two ways:

1. There is now a non-clickable gap between the tops and bottoms of the menu items
2. The background image is messed up

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

How can this be fixed?

Answer 1

Add the padding to the a element instead of the li element.

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

for example

Updated Fiddle link

Answer 2

而是在ul.menu > li a添加填充，以消除空白。

Answer 3

http://jsfiddle.net/HXrgq/1/

On the li element, do:

text-indent: 10px;
line-height: 1.5em;

seems this is what you searched: text indented (I suppose this is only one line?) and line-height .