问题：垂直无法堆叠按钮

Question

HTML和CSS的新特性 - 我似乎无法让这些导航按钮堆叠在垂直列中，比如移动布局。想法展示：块会做的伎俩，但它不是。我不认为我的html正在拾取我的任何.btn属性。

[按钮不会垂直堆叠] [1]

.nav { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    list-style-type:none; 
 
    font-weight: bold; 
 
    font-size: 70%; 
 
    color: #FFFFFF; 
 
    background-color: #2b5429; 
 
    font-family: 'Lato', helvetica, sans-serif; 
 
    vertical-align: middle; 
 
    position: sticky; 
 
    line-height: 40px; 
 
    
 
} 
 
.btn { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0px; 
 
    background-color: #2b5429; 
 
    color: #ffffff; 
 
    font-family: 'Lato', helvetica, sans-serif; 
 
    vertical-align: middle; 
 
    position: sticky; 
 
    text-align: center; 
 
    line-height: 40px; 
 
}

<nav class="btn nav"> 
 
<a href="index.html"><button>Home</button></a> 
 
<a href="activities.html"><button>Activities</button></a> 
 
<a href="about.html"><button>About</button></a> 
 
<a href="animalfacts.html"><button>Animal Facts</button></a> 
 
</nav> 
 

Answer 1

a是内嵌在默认情况下，如果你希望它是块级则定义它：

.nav a{ 
    display: block; 
} 

Answer 2

尝试使用html列表进行导航。

ul {list-style: none; margin: 0; padding: 0;} 

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="activities.html">Activities</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="animalfacts.html">Animal Facts</a></li> 
</ul> 

http://jsfiddle.net/wzrx9ea1/