导航向右浮动答案

【问题标题】：Nav float right导航向右浮动
【发布时间】：2015-12-13 18:06:45
【问题描述】：

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

目前我让它们像这样用 html 编码（这 2 个 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;
}

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

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

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

【问题讨论】：

标签： css fixed nav

【解决方案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;
}

希望这会有所帮助！

【讨论】：

是的，你在这里使用引导类。该问题并不表明涉及引导程序。
哦，对不起！虽然我没有任何引导链接
我尝试了这个解决方案，但它对我来说不太奏效。可能是我这边出了点问题。我最终使用了 cale_b 的解决方案，它对我来说非常有效，但感谢您的意见！

【解决方案2】：

我怀疑问题在于nav 元素不是全宽。尝试更明确地使用 nav 元素布局，使用如下样式：

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

你在正确的轨道上。我整理了一个小提琴供你看/玩：

http://jsfiddle.net/7qxrsrrw/

【讨论】：