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 的左侧和右侧有填充（大约 10 像素），我还希望 li 的高度更大一些（以便在行之间有一些空间文本）。我尝试将此行添加到ul.menu > liCSS 中，但它以两种方式弄乱了菜单：

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

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

如何解决这个问题？

4

3 回答 3

2

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

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

例如

更新了小提琴链接

于 2013-06-18T15:53:29.647 回答
1

相反，添加填充 ul.menu > li a ，它可以消除间隙。

于 2013-06-18T15:54:55.763 回答
1

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

在 li 元素上，执行以下操作：

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

似乎这就是您搜索的内容：文本缩进（我想这只是一行？）和line-height.

于 2013-06-18T15:55:21.973 回答