如何将导航栏右对齐
How can I align the navigation bar to the right
我试过将浮动更改为右侧,更改位置并对齐,但没有任何效果。请帮忙。无论我尝试什么,我似乎都无法让它工作。我试过使用其他代码,这些代码的导航栏位于右侧,但也不起作用。希望有人能帮我解决这个问题:)
<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);
}
我试过将浮动更改为右侧,更改位置并对齐,但没有任何效果。请帮忙。无论我尝试什么,我似乎都无法让它工作。我试过使用其他代码,这些代码的导航栏位于右侧,但也不起作用。希望有人能帮我解决这个问题:)
<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);
}