html - CSS Navbar 项目不会右对齐
问题描述
这是我希望登录和注册的 html 代码与导航栏的右侧对齐
<navbar class="navbar">
<div class="content">
<a class="navbarbrand" href="#">Brand</a>
<div class="navbaritemcon">
<a href="#" class="navbaritem">Home</a>
<a href="#" class="navbaritem">About Us</a>
</div>
<div class="navbaritemcon right">
<a href="#" class="navbaritem">Login</a>
<a href="#" class="navbaritem">Sign Up</a>
</div>
</div>
</navbar>
</body>
CSS:-
尝试使用浮动选项,但也不起作用
.navbar{
background-color: #17a2b8;;
width: 100%;
height: 40px;
display: flex;
padding-left: 1rem;
padding-right: 1rem;
position: sticky;
align-items: center;
}
.navbar>.content{
display: flex;
align-items: center;
}
.content{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
max-width: 100%;
min-width: 80%;
margin-right: auto;
margin-left: auto;
}
.navbarbrand{
display: inline-block;
color: white;
font-weight: 700;
font-size: 1.5rem;
text-decoration: none;
margin-right: 1rem;
position: relative;
}
.navbaritemcon{
list-style: none;
float: left;
}
.navbaritem{
font-size: 1rem;
color: white;
display: inline-block;
font-weight: normal;
text-decoration: none;
margin-right: 1rem;
margin-left: 1rem;
}
.right{
justify-content: flex-end;
}
如何使登录和注册显示在导航栏的右侧对齐。请帮助无法找出正确的方法
解决方案
只需使用margin-left:auto;
就可以了
.navbar {
background-color: #17a2b8;
width: 100%;
height: 40px;
display: flex;
padding-left: 1rem;
padding-right: 1rem;
position: sticky;
align-items: center;
}
.navbar>.content {
display: flex;
align-items: center;
}
.content {
position: relative;
padding-top: 8px;
padding-bottom: 8px;
max-width: 100%;
min-width: 80%;
margin-right: auto;
margin-left: auto;
}
.navbarbrand {
display: inline-block;
color: white;
font-weight: 700;
font-size: 1.5rem;
text-decoration: none;
margin-right: 1rem;
position: relative;
}
.navbaritemcon {
list-style: none;
float: left;
}
.navbaritem {
font-size: 1rem;
color: white;
display: inline-block;
font-weight: normal;
text-decoration: none;
margin-right: 1rem;
margin-left: 1rem;
}
.right {
margin-left:auto;
}
<navbar class="navbar">
<div class="content">
<a class="navbarbrand" href="#">Brand</a>
<div class="navbaritemcon">
<a href="#" class="navbaritem">Home</a>
<a href="#" class="navbaritem">About Us</a>
</div>
<div class="navbaritemcon right">
<a href="#" class="navbaritem">Login</a>
<a href="#" class="navbaritem">Sign Up</a>
</div>
</div>
</navbar>
推荐阅读
- async-await - 等待,它是如何工作的?
- android - 在 Android 7.0 版中未记录传出的语音
- ruby-on-rails - 使用 *_type? 方法 Rails 多态关联 | 导轨 5
- c# - File.Copy 适用于调试模式,但不适用于发布模式
- swift - 我如何将协议实现作为函数的参数
- visual-studio - 测试属性页中的 Visual Studio 2017 错误
- itext - 如何防止 TextSharp Pdftable 中的表头拆分
- php - Laravel 中的数据库备份失败
- python - 在 sql server 上运行 python (.py 脚本)
- workflow - 将工作流从 SharePoint Designer 2013 发布到 SharePoint Online 时出错