<li> <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>

我应用padding时<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

你应该给你的"一个"显示:内联块

默认情况下,锚点是"内联"的,并且不会正确显示填充.

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