导航栏没有向右移动？答案

【问题标题】：Navigation bar not being moved to the right?导航栏没有向右移动？
【发布时间】：2021-01-11 02:11:49
【问题描述】：

我正在尝试将 Google 主页重新创建为 theodinproject 的一部分，但我无法将导航栏从顶部移到右侧。

我尝试了 display: flex 和 float: right 但我不确定如何将图像、Gmail 和登录按钮显示在右侧。我被告知我的风格也没有被应用。有人愿意帮忙吗？我将不胜感激。下面是我的 html 和 css 代码的 sn-p 以及指向页面显示方式的链接。 https://i.stack.imgur.com/pAgDn.png

    <ul>
    <li><a><button>Sign in</button></a></li>
    <li><a href="#images">Images</a></li>
    <li><a href="#gmail">Gmail</a></li>
    </ul>  
</header>

ul {
    list-style-type: none;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    padding: 10px 10px;
  }```

【问题讨论】：

请添加正确的代码。

标签： html css

【解决方案1】：

似乎您唯一的错误是您的 css 代码周围没有 <style> 标记。试试这个。

<style>
ul {
    list-style-type: none;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    padding: 10px 10px;
  }
</style>

【讨论】：

【解决方案2】：

使用float不是必须的，你绝对可以使用display: flex。对flex 的最低理解是它只影响子元素，所以如果你想要一个出现在右侧的导航栏，你需要在父元素上使用display: flex。

.header {
 display: flex;
}

<div class='header'>
 <div class='navbar'></div>
 <div class='logo'></div>
</div>

您也可以使用justify-content 选择它们在主轴之间的对齐方式（默认为水平轴）

对于这样的事情，我会添加 justify-content: space-around 或 justify-content: space-between。

我强烈建议您阅读有关 Flex 的更多信息，因为它非常有用。

好资源： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案3】：

您需要将 css 样式包装在 a 中，如下例所示：

<style>
  ul {
    list-style-type: none;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    padding: 10px 10px;
  }
</style>

你还需要删除末尾的字符（```）

【讨论】：

【解决方案4】：

尝试使用：

header {
        width: fit-content;
        margin-left: auto;
    }

例如，我使用这个想法做了顶部部分。这就是它的外观。

html {
  font-family: sans-serif;
  color: #333;
}

header {
  width: fit-content;
  margin-left: auto;
}

li,
ul,
buttom {
  display: inline-block;
  padding: 0 1ch;
}

li {
  font-size: 0.85em;
  color: #555;
}

img {
  display: block;
  margin: 0 auto;
  width: 20em;
  padding-bottom: 1.5em;
}

main {
  padding: 20vh 0;
  width: fit-content;
  margin: 0 auto;
}

input {
  margin: 0 auto;
  display: block;
  border: 1px solid silver;
  border-radius: 2.8em;
  height: 2.8em;
  width: 40em;
}

<header>
  <ul>
    <li>Gmail</li>
    <li>Images</li>
  </ul>
  <button>Sign in</button>

</header>
<main>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  <input type="search">
</main>

我希望它有效！

【讨论】：