html - LI 元素内填充

Question

我无法让 padding 属性在我的 <li> 中工作标签。

这是我的 CSS:

.menu li{
   height:50px;
   display: inline;
   padding:10px 15px 18px 15px;
   border-style: solid;
   border-width: 0px 2px;
   -moz-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   -webkit-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   -o-border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   border-image: url(../img/menuborder.png) 0 2 stretch repeat;
   border-right:0;
}

.menu a{
   color:#fff;
   text-decoration: none;
   padding-top:10px;
} 

这是我的 .HTML:

   <ul class="menu">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Incentives</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Forum</a></li>
        <li class="last"><a href="#">Help</a></li>
    </ul>

然而，padding-top 似乎并没有影响 a 和 li 标签内的文本。

我做错了什么？

谢谢。

Answer 1

您可能需要将填充应用于 a 元素。并且您需要使它成为顶部/底部填充的 block 级元素:

.menu a { 
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px 18px 15px;
} 

注意:inline-block 仅部分支持 IE7 及以下版本。如果以上没有按预期工作，您可以使用 display:block; 和 float:left。

同样重要的是要提到这里的基本问题是 CSS 中 li 上的 display:inline，以及 a 标签默认是 inline。您不能将顶部/底部填充应用到 inline 元素。