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;

}

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

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;

}

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

2 个答案: