如何防止div與「溢出：隱藏」到屏幕調整大小的新行

Question

當對齊我的導航欄時，我遇到了一個問題，當屏幕調整到非常小。我使用的CSS是這樣的：

<div id="navigation-bar"> 
    <div id="logo"></div> 
    <div id="search-box"></div> 
    <div id="user-info"></div> 
</div> 

CSS：

#navigation-bar { 
    overflow: hidden; 
} 
#logo {   //on the left side of navigation bar 
    float:left; 
} 
#search-box { //at the right of logo 
    overflow: hidden; 
} 
#user-info { 
    float:right; 
} 

the example

它運作良好，並在同一行排列三個要素;

但問題是當我把屏幕調整到非常窄時，搜索框和用戶信息將打破新線;有什麼方法可以解決這個問題嗎？

非常感謝！

Answer 1

http://jsfiddle.net/foreyez/sKqZJ/477/

而是浮動：左，使用display：inline-block的方式，您可以使用空白：NOWRAP父。負邊距用於防止邊距顯示：內聯塊創建

#navigation-bar { 
    height: 40px; 
    overflow: hidden; 
    background-color: #AAA; 
    white-space: nowrap; 
} 

#logo { 
    display:inline-block; 
    width: 300px; 
    background-color: #888; 
    margin-right: -4px; 
} 


#user-info { 
    display:inline-block; 
    width:100px; 
    background-color: #777; 
     margin-right: -4px; 
} 
#search-box { 
    display:inline-block; 
    max-width:600px; 
    width:300px; 
    height: 40px; 
    background-color: #777; 

} 

<div id="navigation-bar"> 
    <div id="logo">logo</div> 
    <div id="user-info">user</div> 
    <div id="search-box">searchbox</div> 
</div>