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，因此菜单项显示在导航之外。

我正在使用Google Chrome。

最终判决：好的，我得到了一个有效的解决方案，但不知道为什么要显示：内联块，锚点修复它。看起来设置内联锚点的边距没有任何影响。

Answer 1

你的CSS坏了：

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

因此，未解析下一行的height规则，导致其大小为其内联内容元素。

Answer 2

将display:inline-block;添加到nav a选择器：

此外，导航的height和width或不必要的内容，因为它们是由内容自动设置的

＆＃13;

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;
}

＆＃13;

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

＆＃13;

css3导航高度不会改变

2 个答案: