如何将导航栏对齐到 html 页面的右侧？

Question

我正在尝试将我创建的简单导航栏对齐到 HTML 页面的右侧，但处于固定位置（根据 FreeCodeCamp 的要求），这样当我向上或向下滚动时，我总能看到它。我尝试了各种方法，例如 float: right、不同的 flexbox 属性、text-align: right、margin 属性……但没有任何效果，我只是感到沮丧，因为它太简单了。谁能看看我的代码并告诉我应该怎么做？我是新手所以请原谅我写得不好的代码。

.nav-link {
  font-size: 23px;
  padding-top: 10px;
  text-decoration: none;
  display: flex;
  justify-content: end;
  display: inline;
   
}

#nav-bar {
position: fixed;
  
}

<div>
  <nav id="nav-bar" class="nav-link">
  <a href="#header-2" class="nav-link">About Us</a> | 
  <a href="#header-3" class="nav-link">Services</a> |
  <a href="#header-6" class="nav-link">Pricing</a>
</div>
          </nav>

enter image description here

到目前为止我所得到的结果就是我包含的图像中显示的...

非常感谢。

Answer 1

你可以使用float: right;使其右对齐

    .nav-link {
      font-size: 23px;
      padding-top: 10px;
      text-decoration: none;
      display: flex;
      justify-content: end;
      display: inline;
       
    }

    #nav-bar {
    float: right;
     
    }

HTML:


    <div>
      <nav id="nav-bar" class="nav-link">
      <a href="#header-2" class="nav-link">About Us</a> | 
      <a href="#header-3" class="nav-link">Services</a> |
      <a href="#header-6" class="nav-link">Pricing</a>
    </div>
              </nav>

Answer 2

为固定位置添加 top 和 right 样式。

.nav-link {
  font-size: 23px;
  padding-top: 10px;
  text-decoration: none;
  display: flex;
  justify-content: end;
  display: inline;
}

#nav-bar {
  position: fixed;
  top: 0;
  right: 0;
}

<div>
  <nav id="nav-bar" class="nav-link">
    <a href="#header-2" class="nav-link">About Us</a> |
    <a href="#header-3" class="nav-link">Services</a> |
    <a href="#header-6" class="nav-link">Pricing</a>
  </nav>
</div>

如何将导航栏对齐到 html 页面的右侧？

How do I align my navbar to the right of my html page?

html

css

navbar