不換行的水平導航菜單

Question

我在創建內聯導航菜單時遇到問題，該菜單在瀏覽器調整大小時不會「換行」。無論我嘗試什麼（容器，最小寬度等），它在你猜對它，IE（使用IE8測試，也使用最新的FF和Chrome）中看起來顯着不同。我是一個新手，請原諒這個爛攤子。該網站是

http://robertdwatkins.com

注：標識的樣式與CSS，並在單獨的div浮到naviagtion的左側，使他們排隊​​。

HTML：

<div id="logo"> 
    <a>&nbsp;ROBERT WATKINS&nbsp;</a> 
</div> 
<div id="navigation" class="link"> 
    <ul> 
     <li><a href="biography.html">BIOGRAPHY</a></li> 
     <li><a href="painting.html">PAINTING</a></li> 
     <li><a href="drawing.html">DRAWING</a></li> 
     <li><a href="photography.html">PHOTOGRAPHY</a></li> 
     <li><a href="teaching.html">TEACHING</a></li> 
     <li><a href="writing.html">WRITING</a></li> 
     <li><a href="links.html">LINKS</a></li> 
    </ul> 
</div> 

CSS：

#navigation{ 
    position: absolute; 
    top: 14px; 
    left: 150px; 
    z-index: 10 
} 

#navigation ul{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li{ 
    display: inline; 
    list-style-type: none; 
} 

#navigation li a{ 
    padding-right: 18px; 
    padding-left: 18px; 
    background: #000; 
    color: #FFF; 
} 

Answer 1

嘗試：

首先包裝在一個div您的徽標和導航，並給予一個特定的寬度。比方說像960px。

#logo{ 
    float: left; 
    border: 1px solid white; 
    outline-width: 5px; 
    font-family: "Arial", "Helvetica", "sans-serif"; 
    font-size: 10px; 
    font-weight: bolder; 
    text-transform: none; 
    color: white; 
    margin: 7px 0 0 8px; 
    padding: 2px; 
    text-align: center; 
    vertical-align: middle; 
    letter-spacing: 0.1em; 
} 

#navigation{ 
    z-index: 10; 
    float: left; 
    display: inline-block; 
    margin-top: 8px; 
} 

希望有幫助。我沒有在IE中測試，但它似乎在Chrome和FF中工作。可能必須調整用於定位的填充和邊距。