下拉菜單，調整瀏覽器大小時

Question

我正在做一個水平下拉菜單。它看起來像這樣：

[menu1][menu2][menu3][menu4] 

但是當我調整（更窄）我的瀏覽器，菜單看起來像：

[menu1][menu2] 

[menu3][menu4] 

我希望它留在行所有的時間！

編輯：我的CSS文件

/* General */ 
 
#cssdropdown, #cssdropdown ul { 
 
    list-style: none; 
 
    position: relative; 
 
    visibility: visible; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
} 
 
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; } 
 

 
/* Head links */ 
 
#cssdropdown li.headlink { 
 
    width: 11.911em; 
 
    float: left; 
 
    margin-left: -1px; 
 
    border: 1px black solid; 
 
    background-color: #e9e9e9; 
 
    text-align: center; 
 
} 
 
#cssdropdown li.headlink a { display: block; padding: 10px; } 
 

 
/* Child lists and links */ 
 
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; } 
 
#cssdropdown li.headlink:hover ul { display: block; } 
 
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;} 
 
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; } 
 

 
/* Pretty styling */ 
 
body { 
 
    font-family: verdana, arial, sans-serif; 
 
    font-size: 0.7em; 
 
    position: static; 
 
} 
 
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; } 
 
#cssdropdown li.headlink { background-color: #FFF50A; } 
 
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; } 
 

 
/*headermenu*/ 
 
#headerMenu { 
 
    position: relative; 
 
    float: left; 
 
    color: #DDD; 
 
    z-index: 1; 
 
    height: 34px; 
 
    right: 10px; 
 
    width: auto; 
 
}

<div align="left" class="thrColElsHdr" id="headerMenu"> 
 
    <ul id="cssdropdown" name="cssdropdown"> 
 
    <li class="headlink"> <a href="index.php?mode=ecole&page=histoire">Ecole</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=ecole&page=histoire">Histoire</a></li> 
 
     <li><a href="index.php?mode=ecole&page=philosophie">Philosophie</a></li> 
 
     <li><a href="index.php?mode=ecole&page=methode">M&eacute;thode</a></li> 
 
     <li><a href="index.php?mode=ecole&page=equipe">Equipe</a></li> 
 
     <li><a href="index.php?mode=ecole&page=qualite">Qualit&eacute;</a></li> 
 
     <li><a href="index.php?mode=ecole&page=service">Services</a></li> 
 
     <li><a href="index.php?mode=ecole&page=emploi">Emplois</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=cours&page=individuel">Cours</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=cours&page=individuel">Individuel</a></li> 
 
     <li><a href="index.php?mode=cours&page=semiprive">Semi-priv&eacute;</a></li> 
 
     <li><a href="index.php?mode=cours&page=minigroupe">Mini-groupe</a></li> 
 
     <li><a href="index.php?mode=cours&page=intensif">Intensif</a></li> 
 
     <li><a href="index.php?mode=cours&page=entreprise">Entreprises</a></li> 
 
     <li><a href="index.php?mode=cours&page=distance">A distance</a></li> 
 
     <li><a href="index.php?mode=cours&page=telephone">Par t&eacute;l&eacute;phone</a></li> 
 
     <li><a href="index.php?mode=cours&page=coaching">Coaching</a></li> 
 
     <li><a href="index.php?mode=cours&page=scolaire">Soutien scolaire</a></li> 
 
     <li><a href="index.php?mode=cours&page=diplome">Dipl&ocirc;mes officiels</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=inscription&page=formulaire">Inscription</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=inscription&page=evaluation">Auto-&eacute;valuation</a></li> 
 
     <li><a href="index.php?mode=inscription&page=condition">Conditions</a></li> 
 
     <li><a href="index.php?mode=inscription&page=tarif">Tarifs</a></li> 
 
     <li><a href="index.php?mode=inscription&page=formulaire">Formulaires</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="headlink"> <a href="index.php?mode=contact&page=ecole">Contact</a> 
 
     <ul> 
 
     <li><a href="index.php?mode=contact&page=ecole">Ecole</a></li> 
 
     <li><a href="index.php?mode=contact&page=lien">Lien externe</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div><br/>

Answer 1

您應該在包含菜單的元素上設置最小寬度。

Answer 2

您要使用的CSS

white-space:nowrap; 

這應該被應用到你的菜單

的父

，如果你提供一些實際的HTML，我可以更具體

例如

<div class='menuContainer'> 
    <span>menu1</span> 
    <span>menu2</span> 
    <span>menu3</span> 
    <span>menu4</span> 
</div> 

和CSS像

.menuContainer { 
    white-space:nowrap; 
} 

看到http://www.w3schools.com/css/pr_text_white-space.asp

編輯響應修改問題

I 假設 #cssdropdown是您的容器圍繞所有菜單的標識。如果它不正確，請讓我知道這個html。

不管怎麼說，在這種情況下，你應該添加到您的CSS等

#cssdropdown { 
    white-space:nowrap; 
} 

一個說明，我看到你的男子的寬度設置爲11.911em。當我看到我只能假設你將其設置爲，正好是，對於任何字體都有正確的寬度。請記住，你的用戶可能會有略微不同的字體，突然你的像素完美的大小是沒有意義的。設計時考慮到更多的靈活性。

Answer 3

聽起來像你的寬度屬性沒有在HTML或CSS中設置。

你能提供一些示例代碼嗎？