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

注意：IE7及以下版本仅部分支持inline-block。如果上述操作无效，您可以使用display: block;和float:left。

同样重要的是，这里的基本问题是CSS中display:inline的{{1}}，以及li标记默认为a的事实。您无法将顶部/底部填充应用于inline元素。

Answer 2

填充不适用于

display: inline;

尝试

display: block;

代替，可选择

float: left;

Answer 3

您还可以尝试为line-height设置a以匹配li的高度，如下所示：

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

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

Answer 4

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

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

指定样式

.menu

本身是为了将所有其他填充（左侧）添加到列表项的块中。

Answer 5

你或许可以给你一个班级名称并尝试为那个班级设计造型。

Answer 6

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

.menu {padding-top: 10px;}

Answer 7

这对我有用：

CSS

.menu li{
  padding:7px;
}

HTML

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

在LI元素内填充

7 个答案: