html - 如何在具有 100% 宽度的固定位置 div 中居中无序列表

Question

我正在开发一个网页布局，我在顶部有一个导航栏设置为位置：固定；宽度：100%；这样即使用户滚动它也会停留在视口的顶部并占据页面的宽度。我想在其中放置一个居中的水平无序列链接列表（宽度 940px），如下所示：

<nav id='nav-bar'>
    <ul>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
        <li><a href='#'>text</a></li>
    </ul>
</nav>

尝试了显示和位置/浮动等的各种组合后，如果我尝试调整页面大小，我无法将其居中，而列表不会超过两行。我预计可能需要其他一些包装器来包含该列表。

Answer 1

要在元素中强制执行单行li元素ul并将它们居中：

#nav-bar {
    white-space: nowrap;
    text-align: center;
}

要让li元素遵守这些规则，请使用 inlineor inline-block：

#nav-bar li {
    display: inline-block; /* allows width and height to be set on the element ('inline' does not) */
}

JS小提琴：

• display: inline-block;

• display: inline;

最后，一个演示使用相对宽度（in %），并设置一min-width组以防止li元素变得太小：http: //jsfiddle.net/davidThomas/FWtFe/3/

Answer 2

您应该将内容包装到fixed父级中：

<div id="fixed-element">
    <nav id='nav-bar'>
        <ul>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
            <li><a href='#'>text</a></li>
        </ul>
    </nav>
</div>​

并将css应用于它：

#fixed-element{position:fixed:top:0;}
#nav-bar{position:relative;float:left;left:50%;}
#nav-bar ul{position:relative;float:right;right:50%;}
#nav-bar ul li{float:left;clear:none;display:inline-block;list-style:outside none;margin:0 5px;}​

这是jsfiddle的链接

Answer 3

试试这个小提琴 http://jsfiddle.net/gajjuthechamp/JuYpT/

它只是你需要的margin:auto。display:inline-block