jquery - 最小网站的简单标题 - 位置问题

Question

我是 Jason，我正在尝试学习一些 HTML/CSS(使用 Bootstrap )/JS 的基础知识以获取一些前端知识

我已经学习了一些教程:一些好的，一些不好的 - 我正在尝试自己浏览一个网站，因为我认为这将帮助我最快地学习。现在，我有一个 Logo ，我正试图将其固定在屏幕的顶部/左中部，并且在该 Logo 右侧的同一行上有一个基本的内联菜单。但出于某种原因，菜单不会通过与 Logo 保持一致来配合。菜单也堆叠而不是水平运行。我是否需要将 Logo 包含在同一个容器中，或者是否有更好的方法来进行操作？

<div class="nav">
        <div class="logo">
    <img src="logo.gif">
    </div>

  <div class="container">
    <ul class = "pull-right">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Resume</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

CSS:

.nav li{
display: inline;
}
.logo{
    position: fixed;
    top: 10px;
left: 50px;
}
.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;

}

我确定不需要向右拉，但我把它留在那儿是为了看看我在错误轨道上的位置。非常感谢。

Answer 1

试试这个:

.nav {
    position: fixed;
    top: 10px;
}
.nav li{
    display: inline-block;
}
.logo{
    position: relative;
    left: 50px;
}
.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;

}

这样，整个导航将被固定，而不仅仅是 Logo ，请记住，固定定位的元素是从它们各自的容器中抽象出来的，而是与视口(viewport)相关。