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/

问题：不能垂直堆叠按钮

2 个答案: