4

我无法让 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 标签内的文本。

我究竟做错了什么？

谢谢。

4

7 回答 7

17

您可能需要将填充应用于a元素。您需要将其设置为块级元素，以便顶部/底部填充起作用：

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

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

同样重要的是要提到这里的基本问题是CSS 中的display:inline你的 s ，以及标签默认情况下li的事实。您不能将顶部/底部填充应用于元素。ainlineinline

于 2012-10-22T20:57:20.827 回答
5

填充不起作用

display: inline;

尝试

display: block;

相反，并且可选地

float: left;
于 2012-10-22T20:56:34.117 回答
1

您也可以尝试设置line-height以a匹配类似的高度li：

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

在这里演示：http: //jsfiddle.net/9TcRP/

于 2012-10-22T21:01:10.143 回答
0 
.menu li a{color:#fff;text-decoration: none;padding-top:10px;}

这将为列表项本身添加填充。您需要为

.menu

本身，以便将所有其他填充（左右）添加到列表项块中。

于 2012-10-22T20:56:38.820 回答
0

您也许可以给您 li 一个类名并尝试为该类设置样式。

于 2012-10-22T21:02:55.703 回答
0

您想要菜单本身的顶部填充。不是锚点或列表元素。

.menu {padding-top: 10px;}
于 2012-10-22T21:03:15.140 回答
0

这对我有用：

CSS

.menu li{
  padding:7px;
}

HTML

<div class="menu">
  <ul>
    <li>first element
    <li>second element
    <li>third element
    <li>fourth element
  </ul>
</div>
于 2019-12-09T17:15:02.407 回答