css - 内的填充 穿过 边缘的顶部

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"display:inline-block

默认情况下， anchor 是“内联”的，不会正确显示填充。

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