html - css3 导航高度不变

Question

做了一个这样的菜单:

nav
{
  margin: 20px;
  background-color:pink;
  border: 2px solid black; 
}
nav a
{
  margin:10px;
  text-decoration:none;
  font-weight:bold;
    background-color:red;
  border: solid 1px;
  background-color:black;
  color:Yellow;
  padding:10px 30px;
  border-radius: 15px;
display:inline-block;

}

<nav >
  <a href="/html/">HTML</a> 
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a> 
  <a href="/jquery/">jQuery</a>
</nav>

问题是无论我设置什么导航高度，它仍然会像 50px 一样显示得很窄，所以菜单项显示在导航之外。

我正在使用谷歌浏览器。

最终结论:好的，我得到了一个可行的解决方案，但不知道为什么 display:inline-block for anchors 修复了它。看起来为内联 anchor 设置边距没有任何效果。

Answer 1

你的 CSS 有问题:

border: 2px solid black    /* you forgot the closing ; here */
height:150px;

因此下一行的 height 规则没有被解析，导致它的大小适应它的内联内容元素。