时间戳

首页 > 解决方案 > 如何让我的导航栏停留在主页的左侧？

html - 如何让我的导航栏停留在主页的左侧？

问题描述

我有一个导航栏，正如在 jsfiddle 中看到的那样，它水平放置在我网站的顶部，而我希望它是垂直的，贯穿整个网站。可以在这里看到一个直观的例子。我不希望它像那个例子那样花哨，只是一个标准的垂直矩形，我可以添加 div 和我需要添加的任何其他内容。

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <nav>
      <div>
        <h1>ll</h1>
        <p>zwerrrrrrss</p>
        <p>werghhh</p>
        <br>
        <p>zdeeeeeu</p>
        <br>
        <p>awer7</p>
      </div>
    </nav>
    <header>
      <div>
        <p>lkwwss</p>
      </div>
    </header>

CSS

nav {
  grid-column: 1;
  grid-row-end: 10;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: center;
  padding: 0vw .2vw 0vw .2vw;
}

小提琴：https ://jsfiddle.net/obs24h61/

标签： htmlcss

解决方案

我不确定我是否正确理解了您的问题，这是您需要的吗？

你的代码几乎就在那里，你只需要多玩一点，你就可以得到答案，使用text-align:left，如果你需要给一些height和width左侧导航栏。

divs如果这不是问题，我添加了一些，这使事情变得更清洁。

#main{
  width:100%;
  border:1px solid yellow;
  display:inline-block;
}
#left{
  width:30%;
  float:left;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: left;
  padding: 0vw .2vw 0vw .2vw;
  display:inline-block;
  height:500px;
}
#right{
margin-left: 31%;
height:500px;
  border:1px solid red;
  background-color:gray;
}
zznav {
  grid-column: 1;
  grid-row-end: 10;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: left;
  padding: 0vw .2vw 0vw .2vw;
  display:inline-block; 
}
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div id="main">
  

  <div id="left">
   <nav>
      <div>
        <h1>ll</h1>
        <p>zwerrrrrrss</p>
        <p>werghhh</p>
        <br>
        <p>zdeeeeeu</p>
        <br>
        <p>awer7</p>
      </div>
    </nav>
  </div>
   <div id="right">
     <header>
      <div>
        <p>lkwwss</p>
      </div>
    </header>
   </div>
     </div>

推荐阅读