html - 无法让我的导航正确 float 。如何让我的导航向右移动？

Question

这是我的 Css 代码。我无法让我的 CSS 使导航栏向右浮动。有什么办法吗？我尝试使用 float: right; 但那没有用。 我的 HTML 只有一个标题和一个包含我的网站导航的列表。

如果您也需要，这是我的 HTML:

body {
  font-family: 'Calistoga', cursive;
  background-color: #F5E9DF;
  margin: 0 auto;
}


/* header */

header {
  display: flex;
  align-items: center;
  color: #F5E9DF;
  background-color: #1F2020;
  height: 100px;
}

.logo {
  margin-left: 20px;
  margin-right: 20px;
  align-items: center;
}

h1 {
  text-align: center;
}


/* sitenavigation */

nav.sitenavigation {
  color: #F5E9DF;
  text-align: center;
}

nav.sitenavigation li {
  display: inline;
  color: #F5E9DF;
  margin: 0.3em 0.5em;
  font-size: 18px;
}

nav.sitenavigation a:link {
  text-decoration: none;
  color: #F5E9DF;
}

nav.sitenavigation a:visited {
  color: #F5E9DF;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: #CC422B;
}

<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">

<header>
  <a href="index.html"><img class="logo" src="images/logo.png" width="50" height="50" alt="100"></a>
  <h1 id="title">Rust Raiding Calculator</h1>
  <nav class="sitenavigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="raidcalculator.html">Raid Calculator</a></li>
      <li><a href="contact.html">Contact Us/Feedback</a></li>
    </ul>
  </nav>
</header>

Answer 1

在子项 .sitenavigation 中添加 margin-left: auto 以自动将元素推到右侧。在处理模板决策时，我更愿意避免 float 规则。

body {
  font-family: 'Calistoga', cursive;
  background-color: #F5E9DF;
  margin: 0 auto;
}


/* header */

header {
  display: flex;
  align-items: center;
  color: #F5E9DF;
  background-color: #1F2020;
  height: 100px;
}

.logo {
  margin-left: 20px;
  margin-right: 20px;
  align-items: center;
}

h1 {
  text-align: center;
}


/* sitenavigation */

nav.sitenavigation {
  margin-left: auto;
  color: #F5E9DF;
  text-align: center;
}

nav.sitenavigation li {
  display: inline;
  color: #F5E9DF;
  margin: 0.3em 0.5em;
  font-size: 18px;
}

nav.sitenavigation a:link {
  text-decoration: none;
  color: #F5E9DF;
}

nav.sitenavigation a:visited {
  color: #F5E9DF;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: #CC422B;
}

<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">

<header>
  <a href="index.html"><img class="logo" src="images/logo.png" width="50" height="50" alt="100"></a>
  <h1 id="title">Rust Raiding Calculator</h1>
  <nav class="sitenavigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="raidcalculator.html">Raid Calculator</a></li>
      <li><a href="contact.html">Contact Us/Feedback</a></li>
    </ul>
  </nav>
</header>