LI元素内的填充 [英] Padding inside LI element

问题描述

我无法在<li>标签中使用padding属性.

I cannot get the padding property to work inside my <li> tag.

这是我的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标记内的文本.

Yet, the padding-top doesn't seem to affect the text inside the a and li tag.

我在做什么错了?

谢谢.

推荐答案

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

You probably need to apply the padding to the a element. And you will need to make that a block-level element for the top/bottom padding to work:

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

注意:IE7及更低版本仅部分支持inline-block.如果上述方法无法正常工作，则可以使用display: block;和float:left.

Note: inline-block is only partially supported in IE7 and below. You can use display: block; and float:left if the above does not work as expected.

还必须提到的基本问题是CSS中li上的display:inline，默认情况下a标记为inline.您不能对inline元素应用顶部/底部填充.

Also important to mention that the base issue here is the display:inline on your lis in the CSS, and the fact that the a tag is inline by default. You cannot apply top/bottom padding to an inline element.

这篇关于LI元素内的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！