在LI元素内填充

Question

我无法在我的<li>标签内部使用padding属性.

这是我的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>

然而,填充顶部似乎不会影响a和li标签内的文本.

我究竟做错了什么？

谢谢.

Answer 1

您可能需要将填充应用于a元素.并且您需要使顶部/底部填充的块级元素工作:

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

注意:inline-blockIE7及以下版本仅部分支持.您可以使用display: block;,float:left如果上述内容无法按预期工作.

同样重要的是,这里的基本问题是CSS中display:inline的lis,以及默认情况下a标记的事实inline.您不能将顶部/底部填充应用于inline元素.

Answer 2

填充不适用

display: inline;

尝试

display: block;

相反,也可以选择

float: left;