如何将导航栏向右对齐答案

【问题标题】：How can I align the navigation bar to the right如何将导航栏向右对齐
【发布时间】：2021-04-13 18:31:39
【问题描述】：

我尝试将浮动更改为右侧，更改位置和对齐，但没有任何效果。请帮忙。无论我尝试什么，我似乎都无法让它工作。我曾尝试使用右侧有导航栏的其他代码，但这也不起作用。希望任何人都可以帮助我解决这个问题:)

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

【问题讨论】：

标签： html css alignment navbar

【解决方案1】：

优化代码：

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

【讨论】：

非常感谢您优化代码并帮助我正确对齐！

【解决方案2】：

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

【讨论】：

@artin0905 如果我的回答解决了您的问题，请考虑接受！