如何將導航欄向右對齊

Question

我嘗試將浮動更改為右側，更改 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);
}

Answer 1

您將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>

Answer 2

優化代碼：

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);
}