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定义上，然后它应该工作。 并使#nav li＃更小以获得更大的特定性。

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

不同的列表项

1 个答案: