html - 不同的列表项

Question

嘿，我有一个非常有趣的问题。我有一个很长的 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>

然后我有类似的东西:

样式.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;
}

为什么第一项不是 10x10 像素？

Answer 1

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

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