2

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

我尝试了 display: flex 和 float: right 但我不确定如何将图像、Gmail 和登录按钮放在右侧。我被告知我的风格也没有被应用。有人愿意帮忙吗？我将不胜感激。下面是我的 html 和 css 代码片段以及页面显示方式的链接。 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;
  }```
4

4 回答 4

3

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

<style>
ul {
    list-style-type: none;
  }
  
  li {
    float: right;
  }
  
  li a {
    display: block;
    padding: 10px 10px;
  }
</style>
于 2021-01-11T02:27:00.193 回答
0

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-aroundor justify-content: space-between。

我强烈推荐阅读更多关于 Flex 的内容，因为它非常有用。

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

于 2021-01-11T02:28:18.147 回答
0

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

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

并且您还需要删除末尾的字符（ ``` ）

于 2021-01-11T02:28:22.217 回答
0

尝试使用：

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>

我希望它有效！

于 2021-01-11T02:45:13.417 回答