极简网站 header - 位置有问题

Question

我是 Jason，我正在尝试学习一些 HTML/CSS（使用 bootstrap）/JS 的基础知识以获取一些 front-end 知识

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

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

}

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

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;

}

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

Answer 2

看看这个JSFiddle

修复整个导航栏，而不仅仅是徽标！

CSS:

body{
    background-color:black;
}
.nav {
    position: fixed;
    top: 10px;
}
.nav li, .container, .logo{
    display: inline-block;
}
.logo{
    position: relative;
    left: 50px;
    margin-right:10px;
    vertical-align:middle;
}
.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;

}

极简网站 header - 位置有问题

Simplistic header for a minimal website - trouble with position

html

css

jquery

twitter-bootstrap

twitter-bootstrap-3