css - 对齐到固定元素的右侧

Question

我的页面左侧有一个导航栏。这个栏是固定的，所以它可以随着页面滚动。

现在我想将我的内容对齐到它的右侧，但我不想明确指定导航栏或页面内容的宽度/边距，以便导航栏可以扩展以适合其文本。

我怎么能用 CSS 做这样的事情呢？

我正在使用 position: fixed 来对齐我的导航栏，如下所示:

#navbar,
#navbar > ul,
#navbar > ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#navbar > ul {
    position: fixed;
    float: none;
    background: #fff;
}
#navbar > ul > li {
    float: none;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;
}

这是 HTML:

<div id='navbar'>
    <ul>
        <li><a class="nav" href='#home'><span>Home</span></a></li>
        <li><a class="nav" href='#articles'><span>Articles</span></a></li>
        <li><a class="nav" href='#about'><span>About</span></a></li>
    </ul>
</div>

Answer 1

演示:http://codepen.io/theskumar/full/slgfi (调整浏览器大小查看效果)
代码:http://codepen.io/theskumar/pen/slgfi

更多帮助
您应该有两个宽度为 % 的主层容器。一种是绝对定位，可以滚动，另一种是固定定位。

现在您可以根据需要将内容放入这些容器中。它们将适合并调整大小。