Html 如何在100%宽度的固定位置div内将无序列表居中

我正在处理一个网页布局，我在顶部有一个导航栏，设置为位置：固定；宽度：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>

---

在尝试了各种显示和位置/浮动等组合后，如果我试图调整页面大小，如果列表不环绕两行，我就无法将其居中。我希望可能需要一些其他包装来包含列表。

要在

ul

元素中强制执行一行

li

元素，并将其居中：

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

要使

li

元素遵守这些规则，请使用

inline

或

inline block

：

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

JS小提琴：

---

最后，演示如何使用相对宽度（在

%

中），设置

min width

以防止

li

元素变得太小：

您应该将内容包装到

固定的
父项中：

<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>​

试试这个

它唯一的
margin:auto
和
display:inline block
是您需要的

#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;}​