Question

我有像这样的水平导航栏。 enter image description here

我需要将此导航栏垂直向左。这是我的HTML

<div ng-controller="PortalController">
    <header>
        <h1>E_Zuite</h1>
        <nav role='navigation'>
            <ul>
                <li><a class="link-1 entypo-home active" href="#home"></a></li>
                <li><a class="link-2 entypo-picture" href="#clients"></a></li>
                <li><a class="link-3 entypo-user" href="#about"></a></li>
                <li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
            </ul>
        </nav>
    </header>
</div>

这是我的css

 header {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin: 5px 0px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  height: 70px;
  display: inline-block;
}

我确实需要这个顶部的导航栏和图标。我对css不太熟悉。

Answer 1

将您的CSS更改为：

header {
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin: 5px 0px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  width: 200px;
  height: 70px;
  float: left;
  display: block;
}

我所做的很简单，更改了header的宽度并将高度设置为100%，然后我设置了width和float属性您的li菜单。

它应该按照您的预期工作，但请仔细查看它是否符合您的要求。

Answer 2

header h1{
  float:none;
 }
header nav ul {
  float:none;
 }
header nav ul li{
 display:block;
 width:100%
}

只需在css文件中添加css。

Answer 3

如果您想将垂直导航修复到左侧，下面的代码将有所帮助。

 nav{
      position: fixed;//fixes the navigation bar to left 
      top: 100px;
      left: 0px;    
    }
    header {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      background-color: #373948;
      position: fixed;
      top: 0px;
      left: 0px;
      padding: 0px 0px 0px 30px;
    }

    header h1 {
      float: left;
      margin: 5px 0px;
      color: white;
      font-family: 'Meddon', cursive;
    }

    header nav ul {
      height: 70px;
      width: 30px;
      margin: 0;
      padding: 0;
    }

    header nav ul li {
      display: inline-block;
      width: 30px;
    }

将水平导航更改为垂直

3 个答案: