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

【问题标题】：Cant get my nav to float right. How do to get my nav to go to right?无法让我的导航正确浮动。如何让我的导航向右？
【发布时间】：2020-03-30 16:58:54
【问题描述】：

这是我的 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>

【问题讨论】：

by "cant get my css to float the nav to the right"你的意思是nav.sitenavigation吗？

标签： html css layout css-float

【解决方案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>

【讨论】：

【解决方案2】：

替换 nav.sitenavigation 类的 css 代码。

nav.sitenavigation {
  color: #F5E9DF;
  width: calc(100% - 31%);
  float: right;
  text-align: right;
}

【讨论】：

【解决方案3】：

nav.sitenavigation {
    color: #F5E9DF;
    text-align: right;
    width: 65%;
}

您可以根据媒体查询更改宽度。

【讨论】：