如何将导航栏与html页面的右侧对齐？
如何将导航栏与html页面的右侧对齐？
提问于 2021-01-28 11:20:15
我正在尝试将我创建的简单导航栏与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>
到目前为止，我所拥有的结果是我包含的图像中显示的内容……
非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-28 11:27:50
为固定位置添加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>
Stack Overflow用户
发布于 2021-01-28 11:26:39
你可以使用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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65930556
复制相关文章
相似问题
腾讯云开发者
