-1

这是它的 jsfiddle http://jsfiddle.net/8PcxE/

<div id="container">
        <div id="header">
                <div id="nav-container">
                    <ul id ="nav-list">
                        <li id=nav-title>lymbo</li>
                        <li><a href="#">Playmaps</a></li>
                        <li><a href="../map.html">Map</a></li>
                        <li><a href="../about.html">About</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
        </div>

在更宽的页面上很好，但是当我在一个小页面上运行它时，一切都变得局促起来，并且选项被推到一起，形成了一个类似拉链的图案。

我的另一个问题是，当我在标题或段落中键入内容时，它会位于顶部并与导航栏相交，使其看起来一团糟。

我的目标是制作一种“渐变”的导航栏，从而产生阴影。但这似乎也不对。如果有人可以给我一些意见，那将不胜感激。

我发现在我将导航容器 CSS 更改为 position: relative from position: fixed 后，它可以解决。这样做有什么负面影响吗？

4

1 回答 1

0

由于您已将所有更改<li>为inline，因此最简单的解决方案是防止包装<ul>：

#nav-list {
  white-space: nowrap;
  /* ... */
}

http://jsfiddle.net/mblase75/Lt72p/

于 2013-05-29T18:26:40.467 回答