<a>标签内的填充在<li>标签内会顶出<li>标签顶部

Question

我有这段代码：

<ul>
   <li><a>my link 1</a></li>
   <li><a>my link 2</a></li>
   <li><a>my link 3</a></li>
</ul>

当我给<a>应用padding时：

ul {
  list-style: none;
  margin: 30px 0 0 2.6em;
}
ul li {
  height: 41px;
  width: 196px;
  background: url(images/image.png) no-repeat; 
  position: relative;
}
ul li a {
  padding-top: 5px;
}

填充效果起作用了，但它会折叠并穿过<li>的顶部边缘，而不是将<a>向下推。我该如何解决这个问题？

- jilseego

---

你尝试过使用margin-top: 5px;吗？这听起来更像是你想要的。 - George Johnston

你能展示一下那段代码的所有CSS吗？ - Jason Gennaro

是的，我也试过了，但没用。但这不是我需要的，因为它不能让整个“li”的区域可点击。甚至尝试用边框包装“li”和“a”。 - jilseego

Answer 1

你应该将你的“a”设置为display:inline-block。

默认情况下，锚点是“inline”，并且无法正确显示填充(padding)。

jsFiddler演示：http://jsfiddle.net/PqajF/3/

- Mo Valipour

---

@jilseego：感谢不起作用。你必须接受答案。 :) - Robert Koritnik

Answer 2

ul li a
{
    padding-top: 5px;
    display: inline-block;
}

- Robert Koritnik

Answer 3

你需要省略掉a

请参见http://jsfiddle.net/nPXyN/

<span>padding</span>
<ul id="paded">
    <li><a>my link 1</a></li>
    <li><a>my link 2</a></li>
    <li><a>my link 3</a></li>
</ul>
<span>margin</span>
<ul id="margined">
    <li><a>my link 1</a></li>
    <li><a>my link 2</a></li>
    <li><a>my link 3</a></li>
</ul>



ul#paded li {
    padding-top: 5px;
    border: 1px solid black;
}

ul#margined li {
    margin-top: 5px;
    border: 1px solid black;
}

- Prashant Bhate