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 页面的右侧对齐？

2 个答案: