Question

我正在尝试创建一个两部分的导航栏，在页面的左侧和右侧都有选项（它是我的页面的视觉主题，应该是树的分支，叶子是按钮）。

目前我有这样的html编码（这两个png现在只是占位符）：

<nav>
<img src="images/nav-menu-left-temp.png" alt=""/>
<img id="navright" src="images/nav-menu-right-temp.png" alt=""/>
</nav>

这是我申请的CSS。

nav
{
    position: fixed;
}
#navright
{
    float: right;
    width: auto;
}

我希望他们两个都有固定位置到页面顶部，但对于左侧导航栏我需要它也固定在页面的右侧如果可能（所以它看起来像一个分支从离开屏幕）。我希望浮动：右边会在固定的帮助下完成工作但是在浏览器边缘和条形图像之间的左侧似乎有一个边距。页面宽度当前设置为自动。我曾希望它能够正确地扩展。

我拥有的屏幕截图： http://i723.photobucket.com/albums/ww238/cerberosg/nav1_zpsumvws3h7.jpg

我想要实现的目标： http://i723.photobucket.com/albums/ww238/cerberosg/nav2_zpsxpqonads.jpg

Answer 1

我曾经有这样的导航栏，这是我记得的CSS和HTML：

<nav>
    <ul class = "pull-left">
       <li><img src="images/nav-menu-left-temp.png" alt=""/></li>
    </ul>

    <ul class = "pull-right">
       <li><img id="navright" src="images/nav-menu-right-temp.png" alt=""/></li>
    </ul>
</nav>

CSS：

nav {
    display: inline;
}

希望这有帮助！

Answer 2

我怀疑问题是nav元素不是全宽。尝试使用nav元素布局更加明确，使用一些样式：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

你走在正确的轨道上。我把小提琴放在一起，让你看看/玩：

http://jsfiddle.net/7qxrsrrw/

Nav向右浮动

2 个答案: