不同的列表项

Question

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

菜单看起来像这样：

<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？

Answer 1

因为它包含一个宽度和高度均为 20px 的 a 标签。在你的#smaller css定义上设置overflow:hidden，然后它应该可以工作。 并使其#nav li#smaller以获得更高的特异性。

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