HTML / CSS垂直导航栏仍然是水平的?

时间:2017-03-09 07:01:49

标签: html css navigation

我正在尝试为手机制作一个垂直导航栏,但看起来CSS并不好。有人能看到什么错了吗? 我会尽快发布图片。

HTML CODE

#navigation {
  width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

li a {
  display: block;
  width: 100%;
  padding: 8px 16px;
  margin: 0 auto;
}

.nav-active {
  display: block;
  width: 100%;
}

li a:hover:not(.active) {
  color: #1b9cc6;
}
<div id="navigation">
  <ul>
    <li><a class="active" href="#about">ABOUT</a></li>
    <li><a href="#clients">CLIENTS</a></li>
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#work">WORK</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>

编辑:这是immage。很抱歉没有裁剪它,但我找不到适合Linux的工具。 enter image description here

1 个答案:

答案 0 :(得分:0)

伙计,您的#navigation获取了width 100%。它需要百分之百的屏幕宽度。尝试用更小的值来改变它。