Padding inside LI element

问题

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

This is my 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;
}

Here is my .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>

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

What am I doing wrong?

Thanks.

回答1:

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;
}

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.

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.

回答2:

padding won't work for

display: inline;

try

display: block;

instead, and optionally

float: left;

回答3:

You could also try setting line-height for the a to match the height of the li like so:

.menu a{
    color: #000;
    text-decoration: none;
    line-height: 50px;
}

Demo here: http://jsfiddle.net/9TcRP/

回答4:

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

This will add padding to the list items themselves. You will need to give styling to the

.menu

itself in order to add all the other padding (left right) to the block of list items.

回答5:

You might be able to give you li a class name and try your styling for that class.

回答6:

You want the top padding on the menu itself. Not the anchor or list element.

.menu {padding-top: 10px;}

回答7:

This is working for me:

CSS

.menu li{
  padding:7px;
}

HTML

<div class="menu">
  <ul>
    <li>first element
    <li>second element
    <li>third element
    <li>fourth element
  </ul>
</div>

来源：https://stackoverflow.com/questions/13019695/padding-inside-li-element

标签

html

css

padding