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

Question

我是杰森,我正在尝试进入一些HTML/CSS(带引导程序)/ JS的基础知识来跳出一些前端知识

我已经阅读了一些教程:一些好的,一些不好的 - 我试图通过我自己的网站,因为我认为这将帮助我学习最快.现在,我有一个徽标,我试图修复到屏幕的顶部/中间左侧,并在右侧同一行的右侧显示该徽标右侧的基本内联菜单.出于某种原因,菜单不会与徽标保持一致.菜单也堆叠而不是水平运行.我是否需要在同一个容器中包含徽标,或者是否有更好的方法来操纵道路？

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

}

这样,整个导航将被修复,而不仅仅是徽标,请记住固定定位元素从各自的容器中抽象出来,并与视口相关联.