LI元素内的填充

Question

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

我做错了什么？

谢谢。

- oliverbj

Answer 1

你可能需要将内边距应用于 a 元素。并且你需要将其变成块级元素，以使上下内边距起作用：

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

注意：inline-block只有在IE7及以下版本中部分支持。如果以上方法不起作用，您可以使用display: block;和float:left。

此外，需要强调的是，这里的基本问题是CSS中li元素的display:inline设置以及标签默认为inline元素。您不能对inline元素应用顶部/底部填充。

- Kevin Boucher

---

为什么要使用锚点标签而不是li元素？ - My Head Hurts

@Head，主要是因为我习惯这样做并且知道它可以在不测试的情况下工作。但也因为它增加了每个菜单链接的“可点击区域”。 - Kevin Boucher

@MyHeadHurts 在这种情况下，在锚点上放置填充更有意义，因为这似乎是一个导航菜单，可以从更大的可点击区域中受益。 - Bogdan

@KevinBoucher 听起来对我来说是个足够好的理由。我鼓励你为什么要进行即使是最小的更改提供解释- 这就是一个好答案的关键所在。关于IE > 7的支持，你可以添加*display:inline; *zoom: 1以复制inline-block的行为。 - My Head Hurts

Answer 2

内边距对于

不起作用。

display: inline;

尝试

display: block;

相反，可选地使用

float: left;

- LorDex

---

inline-block也是一种选项。只需要记住，如果在HTML标签中使用任何字符（空格，甚至换行符）分隔，则inline-block元素之间会有小间隙。为了避免这种情况，您需要将容器的字体大小设置为0，然后当然还需要为inline-block元素设置字体大小。 - LorDex

Answer 3

您也可以尝试设置a的line-height与li的高度相匹配，方法如下：

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

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

- Bogdan

Answer 4

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

这将为列表项本身添加填充。您需要对其进行样式设置。

.menu

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

- Chris Frank

Answer 5

您想要在菜单本身上设置顶部填充。而不是锚点或列表元素。

.menu {padding-top: 10px;}

- davepmiller

Answer 6

你可以给li元素添加一个类名，然后为该类名编写样式。

- Andres Morales

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>

- user8617716