填充<a> inside <li> pushes through the top of edge of </li><li></li></a>

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>时：

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>。我怎么解决这个问题？

Answer 1

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

锚点默认为“内联”，并且不会正确显示填充。

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

Answer 2

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

Answer 3

您需要省略

请参阅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;
}