[英]How can I align the navigation bar to the right
我尝试将浮动更改为右侧,更改 position 并对齐,但没有任何效果。 请帮忙。 无论我尝试什么,我似乎都无法让它工作。 我曾尝试使用右侧有导航栏的其他代码,但这也不起作用。 希望任何人都可以帮助我解决这个问题:)
<div class="Navigasjon">
<a class="active1" href="Index.php">Forside</a>
<a href="Rappernavn.php">Rappere</a>
<a href="Album.php">Album</a>
</div>
这是 CSS
.Navigasjon {
position: absolute;
margin: 14px;
width: 100%;
top: 0px;
background-color: transparent;
overflow: hidden;
}
.Navigasjon a {
float: left;
display: block;
color: Black;
text-align: right;
padding: 18px 22px;
text-decoration: none;
font-size: 18px;
font-weight: 550;
font-family: sans-serif;
}
.Navigasjon a:hover {
background-color: rgb(128, 128, 128, 0.5);
color: black;
}
.active1 {
background-color: rgb(128, 128, 128, 0.5);
}
您将float:left
应用于.Navigasjon a
。
.Navigasjon { margin: 14px; width: calc(100% - 28px); background-color: transparent; overflow: hidden; text-align: right; }.Navigasjon a { display: block; color: Black; padding: 18px 22px; text-decoration: none; font-size: 18px; font-weight: 550; font-family: sans-serif; display: inline-block; }.Navigasjon a:hover { background-color: rgb(128, 128, 128, 0.5); }.active1 { background-color: rgb(128, 128, 128, 0.5); }
<div class="Navigasjon"> <a class="active1" href="Index.php">Forside</a> <a href="Rappernavn.php">Rappere</a> <a href="Album.php">Album</a> </div>
优化代码:
HTML
<div class="Navigasjon">
<a class="active1" href="Index.php">Forside</a>
<a href="Rappernavn.php">Rappere</a>
<a href="Album.php">Album</a>
</div>
CSS
.Navigasjon {
display: flex;
justify-content: flex-end;
margin: 14px;
}
.Navigasjon a {
display: block;
color: black;
text-align: right;
padding: 18px 22px;
text-decoration: none;
font-size: 18px;
font-weight: 550;
font-family: sans-serif;
}
.Navigasjon a:hover {
background-color: rgb(128, 128, 128, 0.5);
}
.active1 {
background-color: rgb(128, 128, 128, 0.5);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.