0

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

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

我怎么能用 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>
4

2 回答 2

1

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

进一步的帮助
您应该有两个宽度以 % 为单位的主级别容器。一个绝对定位可以滚动，另一个定位固定。

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

于 2013-09-29T09:57:00.790 回答
0

如果您不想指定任一容器的宽度，您可以使用float: left;，display: block;然后通过 jQuery 在其中一个容器上动态设置最大宽度。

看看我的小提琴：http: //jsfiddle.net/ZxQLV/

侧边栏基本上可以有任何宽度，内容 div 会适应它。尝试更改两者的内容并再次运行小提琴。

于 2013-09-29T10:36:10.397 回答