这是我希望登录和注册与导航栏右侧对齐的 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:-
尝试使用 float 选项,但也不起作用
.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>
关于html - CSS 导航栏元素不会右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50990561/