Li元素破壞內容即使與顯示塊

Question

我有一個下拉菜單，很明顯，有些項目比其他更大，所以UL需要增加它的寬度和適合項目，這不會發生在我的菜單上。

檢查此琴： http://jsfiddle.net/U9h26/

在第二和第三個菜單，還有元素的列表，這是更大的一個突破行的最後一個元素，我已經設置了UL與寬度汽車，顯示塊或內聯塊，除了當我爲subnav LI設置一個值，然後它工作，我不想這樣做，因爲它可能會導致大量的維護。

那麼，我該如何使這些itens不要斷線。

<div id="header"> 
       <div class="logo"> 
        <a class="logo" href="index.html"><img src="images/logotipo-linkedu-1.png" alt="LinkEdu" name="LinkEdu" border="0" /></a> 
       </div> 
       <div class="visitor">Olá, Visitante</div> 
       <div class="header-navigation"> 
        <ul class="nav"> 
         <li class="main-nav"><a href="index.html">Home</a></li> 
         <li class="palestras-menu"><a href="#">LinkEdu</a> 
          <ul class="subnav"> 
           <li><a class="subnav-menu" href="#">Sobre</a></li> 
           <li><a class="subnav-menu" href="#">Negocios</a></li> 
           <li><a class="subnav-menu" href="#">Empreendorismo</a></li> 
           <li><a class="subnav-menu" href="#">Como Inserir O que vc quiser</a></li> 
          </ul> 
         </li> 
         <li class="palestras-menu"><a href="palestras.html">Palestras</a> 
          <ul class="subnav"> 
           <li><a class="subnav-menu" href="#">Artes</a></li> 
           <li><a class="subnav-menu" href="#">Decoração</a></li> 
           <li><a class="subnav-menu" href="#">Música</a></li> 
           <li><a class="subnav-menu" href="#">Lazer</a></li> 
           <li><a class="subnav-menu" href="#">Negocios</a></li> 
           <li><a class="subnav-menu" href="#">Empreendorismo</a></li> 
           <li><a class="subnav-menu" href="#">Como Inserir O que vc quiser</a></li> 
          </ul>  
         </li> 
         <li class="main-nav"><a href="cadastro.html">Cadastre-se</a></li> 
         <div class="float-right"> 
          <li id="login" class="login"><a id="login-trigger" href="#">Login <span>▼</span></a> 
           <div id="login-content"> 
            <form> 
             <fieldset id="inputs"> 
              <input id="username" type="email" name="Email" placeholder="E-mail" required> <br /> 

              <input id="password" type="password" name="Password" placeholder="Senha" required> 
             </fieldset> 
             <fieldset id="actions"> 
              <input class="login-button" type="submit" id="submit" value="Login"> 
             </fieldset> 
            </form> 
           </div>      
          </li> 
         </div> 
        </ul> 
        <div class="clear"></div> 
       </div> 

      </div><!-- FIM HEADER --> 

Answer 1

將white-space：nowrap添加到您的CSS。

ul.nav li a { 
display: block; 
padding: 8px 1px; 
width: auto; 
margin: 0px 30px; 
color: #000; 
white-space: nowrap; 
text-decoration: none; 
}