<li> 内 <a> 的填充推过 <li> 边缘的顶部答案

【问题标题】：padding for <a> inside <li> pushes through the top of edge of <li><li> 内 <a> 的填充推过 <li> 边缘的顶部
【发布时间】：2011-09-28 23:07:13
【问题描述】：

我有这个代码：

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

当我像这样对<a> 应用填充时：

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>。我该如何解决这个问题？

【问题讨论】：

你试过使用margin-top: 5px;反而？这听起来更像你想要的。
你能显示那段代码的所有css吗？
是的，我试过了，也没有用。但这不是我需要的，因为它不会填满li 的整个区域以供点击。甚至尝试用边框包裹li 和a。

标签： css padding

【解决方案1】：

你需要省略一个

见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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你应该给你的“a”显示：inline-block

锚点默认是“内联”的，不会正确显示填充。

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

【讨论】：

@jilseego：谢谢不工作。你必须接受答案。 :)