调整大小的窗口，使标签进入下一行

Question

这里是我的CSS和HTML

#header { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    background-image: url('/public/images/header.png'); 
    background-repeat: repeat-x; 
} 

#nav { 
    background: transparent; 
    height: 2.5em; 
    left: -25px; 
    list-style: none; 
    margin: 1em 0 1em; 
    min-width: 100%; 
    min-height: 100%; 
    overflow: hidden; 
    padding: 60px 0 30px 0; 
} 

#nav a { 
    color: white; 
    display: block; 
    float: left; 
    height: 2.5em; 
    padding-left: 30px; 
    text-decoration: none; 
    padding-right: 30px; 
    text-shadow: 0.1em 0.1em #333; 
} 

#nav a:hover { 
    text-shadow: 0.1em 0.1em white; 
    background-color: white; 
    color: darkred; 
    padding-bottom: 5px; 
    text-shadow: 0.1em 0.1em lightgray; 
} 

#nav a:hover.active, #nav a.active { 
    background-color: white; 
    background-position: 0 -60px; 
    color: darkred; 
    text-shadow: 0.1em 0.1em lightgray; 
    padding-bottom: 5px; 
} 

#nav li { 
    float: left; 
    margin: 0 8px 0 0; 
/* Spacing between tabs */; 
} 

#nav span { 
    cursor: pointer; 
    display: block; 
    float: left; 
    line-height: 1.5em; 
    padding: .5em 5px 0 0; 
} 


<div id="header"> 
    <div id="navigation"> 
     <ol id="nav"> 
      <li><a id="overview" href="/overview"><span>Overview</span></a></li> 
      <li><a id="analysis" href="/overview" class="active"><span>Analysis</span></a></li> 
      <li><a id="dashboard" href="/dashboard"><span>My Dashboard</span></a></li> 
      <li><a id="preferences" href="/overview"><span>Preferences</span></a></li> 
      <li><a id="contact" href="/overview"><span>Contact</span></a></li> 
      <li><a id="logout" href="/overview"><span>Sign In</span></a></li> 
     </ol> 
    </div> 
</div> 

这看起来我的屏幕上很好，但如果我开始调整窗口它让标签跳来跳去，去到下一行。我发现，在其他网站与标签不是这种情况。我在这里做错了什么？谢谢。

Answer 1

这些 “其他网站” 可能有其<div id="header">包含在其他元素，如<div id="container">，有一个明确的宽度与CSS设置，如width: 960px：

参见：http://jsfiddle.net/mBJQN/

<div id="container"> 
    YOUR HTML HERE 
</div> 

#container { 
    width: 960px; 
    position: relative 
} 

我添加position: relative使得在#header的position: absolute将相对于#container（see here）。

---

还有另一种选择这里，但它可能不是你一前一后。

您可以添加到white-space: nowrap#header，并改变从float s到display: inline-block。如果这个是你想要的选项，让我知道，因为它需要更多的工作。

http://jsfiddle.net/mBJQN/1/