不同的列表项答案

【问题标题】：Different list item不同的列表项
【发布时间】：2010-08-20 22:52:38
【问题描述】：

嘿，我有一个非常有趣的问题。我有一个非常长的 ul li 菜单，并且想要一个具有不同宽度和高度的项目。

菜单如下所示：

<ul id="nav">
  <li id="smaller"><a href="#" id="smallerLink">The smallest item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  (...)
</ul>

然后我有类似的东西：

style.css：

#nav {
  list-style-type: none;
}

#nav li {
  display: inline-block;
  line-width: 2em;
  width: 20px;
  height: 20px;
}

#nav li a {
  display: inline-block;
  width: 20px;
  height: 20px;
}

#smaller {
  width: 10px;
  height: 10px;
}

#smallerLink {
  width: 10px;
  height: 10px;
}

为什么第一项不是 10x10px？

【问题讨论】：

您是否检查过 Firebug 以了解应用的样式是什么？您是否尝试在声明后添加!important 标志。
我做到了。 “smaller”和“smallerlink”样式不适用，但不知道为什么。
什么是被应用到第一个项目？你能在某处发布现场演示吗（jsbin.com 或 jsfiddle.net 是个人（免费）的最爱）？

标签： html css menu navigation html-lists

【解决方案1】：

因为它包含一个宽度和高度为 20px 的 a-tag。在您的#smaller css 定义上设置溢出：隐藏，然后它应该可以工作。 并使其 #nav li#smaller 以获得更大的特异性。

#nav li#smaller {
    width: 10px;
    height: 10px;
    overflow: hidden
}

【讨论】：

如果您像我在回答中写的那样将#smaller 更改为#nav li#smaller，那么它应该可以工作。