导航栏 HTML/CSS 样式

Question

我一直在尝试使用 CodePen 设计一个固定的导航栏，左侧是我的用户名，右侧是内联链接列表。我还没有想出如何正确格式化它，因为在将 h1 或 p 元素与我的用户名放在一起后，链接列表甚至不在它们所在的彩色 div 中。

我的问题是：如何正确设置导航栏的格式，以便所有内容都内联并整齐地放置，而不会在固定位置覆盖下一个 div？也欢迎任何建议或提示。

HTML:

<body>

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

</body>

CSS:

body {
  margin: 0;
  padding: 0;
}
#nav {
  list-style: none;
  text-align: right;
}
#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}
#overall {
  background-color: #5D6363;
}
#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}
#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

Answer 1

您在这里遗漏了三件事：

您的 header 的 <p> 标签需要 display: inline-block。
您的导航 <ul> 需要 float: right。
您的导航列表项 <li> 标签需要有 display: inline-block.

我已经更新了您的代码以包含这三个新增内容，并创建了一个新的 fiddle 来展示我认为您正在寻找的内容 here.

请注意，您可能还想向 #nav 添加一点 margin-right，向 #fixed p 添加一点 margin-left。

希望对您有所帮助！ :)

Answer 2

你可以在这里做一些事情。

将 P 和#nav 显示为 inline-block。并将#nav 向右浮动。

您也可以删除 height: 60px 以便内容控制高度。

body {
  margin: 0;
}

#nav {
  list-style: none;
  text-align: right;
  float: right;
  margin: 0;
}
#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}
#overall {
  background-color: #5D6363;
}
#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}
#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

p,
#nav {
  display: inline-block;
}

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

您可以做其他事情，例如给 header 一些填充，如果您希望它们彼此相邻而不是列出，还可以显示 #nav li inline-block。

Answer 3

我猜你是 CSS 的新手？如果你是，不用担心，CSS 可能会有点痛苦，需要一点时间来适应。

我复制了你想要做的，所以这就是我要做的。

首先 - 我将提供我设法编写的代码的屏幕截图。

第二 - 我将提供您需要的代码（只有几行）以获得我所做的结果。

第三 - 我将解释代码的情况。

好的，首先是我的结果截图：

好的，现在是让我得到这个结果的代码...

HTML

<div id="fixed">
  <p>Springathing</p>
  <ul id="nav">
    <li><a href="#about">About</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
</div>

<div id="overall">

  <div id="about">

  </div>

  <div id="portfolio">

  </div>

  <div id="contact">

  </div>

  <div id="pageinfo">

  </div>

  <div id="copyright">

  </div>

</div>

</body>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

#nav {
  list-style: none;
  text-align: right;
}

#fixed {
  background-color: #4F7BF7;
  height: 60px;
  width: 100%;
  position: fixed;
}

ul#nav {
    width: 500px;
    margin: auto;
}

ul#nav li {
    display: inline-block;
}

ul#nav li a {
    text-decoration: none;
}

#overall {
  background-color: #5D6363;
}

#about {
  background-color: #A2A2A2;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#portfolio {
  background-color: #B8BBBB;
  border-bottom: 1px solid gray;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#contact {
  background-color: #B8BBBB;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

#pageinfo {
  background-color: #A2A2A2;
  width: 100%;
  height: 100px;
}

#copyright {
  background-color: #4F7BF7;
  width: 100%;
  height: 50px;
}

现在来解释一下...

首先，您会注意到我根本没有更改您的 HTML。您需要的都与 CSS.

有关

基本上我做了两件事。第一件事是我提供了一小段代码来执行 "soft browser reset"，因为我不知道你在屏幕上看到了什么，你使用的是什么浏览器等等。软重置给了我一些平等的立足点（和你）能够产生尽可能彼此几乎相同的结果。

我做的第二件事是关注你 "ul" 元素。我给了它以下内容：

与您的其他作品集宽度相同 div 个元素
"ul" 元素的 auto 边距，以便它居中
我给 "li" 元素一个内嵌显示，这样它们就可以并排排列
我给 "a" 元素添加了 none 的文本装饰以去掉下划线

好了。希望对您有所帮助！

最后，我要推荐一个练习。我学习 CSS better/faster 的方法是，除了 youtube 和在线教程，我还使用 Google Chrome 中的 "inspect element" 来查看简单的网站，然后我复制我所看到的并找出他们为什么做那些事情。我也会尝试找到模板并对它们进行逆向工程。就像我说的，这需要一些时间，但这是值得的！

祝你好运！

导航栏 HTML/CSS 样式

Navigation bar HTML/CSS styling

html

css

nav