不换行的水平导航菜单

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中工作。可能必须调整用于定位的填充和边距。