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元素遵守这些规则，请使用 inline或inline-block：

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

JS Fiddles：

最后，演示了相对宽度的使用（在%中），并设置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;}

Here is the link to jsfiddle

Answer 3

试试这个fiddle http://jsfiddle.net/gajjuthechamp/JuYpT/

它只需要margin:auto和display:inline-block。

如何将无序列表置于100％宽度的固定位置div中

3 个答案: