无法让我的导航器向右浮动。如何使导航正确？

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

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

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>

Answer 2

将浮动对象应用于弹性项目不会导致元素浮动。

在CSS Flexible Box Layout Module Level 1中：

1.1。概述

Flex布局从表面上类似于块布局。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如浮点数和列。

---

3。 Flex容器：flex和inline-flex显示值

浮动和清除不会产生弹性项目的浮动或间隙，也不要使其流出。

在这种情况下，您可以使用自动边距。

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;
  margin-left: auto; /* add */
}

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>