Question

使用CodePen，我一直试图在左侧使用我的用户名设置固定导航栏的样式，并在右侧使用内联链接列表。我还没弄清楚如何正确格式化它，因为在用我的用户名放置h1或p元素之后，链接列表甚至不在他们所持有的彩色div中。

我的问题是：如何正确格式化我的导航栏，以便在固定位置时所有内容都整齐排列而不会遮住下一个div？此外，任何建议或提示表示赞赏。

HTML：

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;
}

CSS：

fillna

Answer 1

你在这里遗漏了三件事：

您的标题<p>代码需要display: inline-block。
您的导航<ul>需要float: right。
您的导航列表项<li>代码需要display: inline-block。

我已更新您的代码以包含这三个新增功能，并创建了一个新的小提示，展示了我认为您正在寻找 here 的内容。

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

希望这有帮助！：）

Answer 2

你可以在这里做几件事。

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您可以执行其他操作，例如为标题添加一些填充，如果您希望它们彼此相邻而不是列出，则还会显示#nav li内联块。

Answer 3

我认为你是CSS新手？如果你是，不用担心，CSS可能会有点痛苦，需要一点时间习惯。

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

首先 - 我将提供我设法编码的截图。

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

第三 - 我将解释代码的内容。

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

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

<强> 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有关。

基本上我做了两件事。第一件事是我提供了一小段代码来进行“软浏览器重置”，因为我不知道你在屏幕上得到了什么，你正在使用什么浏览器等等。软重置让我有些平等基础（和你）能够产生尽可能相同的结果。

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

与您的其他投资组合div元素相同的宽度
“ul”元素的自动余量，以使其居中
我给了“li”元素一个内嵌的显示，以便它们排列在一起
我给了“a”元素一个无文字装饰，以摆脱下划线

你有它。我希望有所帮助！

最后，我建议练习。我更好/更快地学习CSS的原因是，除了youtube和在线教程之外，我使用谷歌浏览器中的“检查元素”来查看简单的网站，然后我复制了我看到的内容并找出了为什么他们做了这些事情。我也会尝试找到模板并对它们进行反向工程。就像我说的那样，需要一些时间，但这是值得的！

祝你好运！

导航栏HTML / CSS样式

3 个答案: