css - 调整屏幕大小时如何防止带有 "overflow:hidden"的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 而不是 float:left，这样你就可以在父级上使用 white-space:nowrap。负边距用于防止 display:inline-block creates

#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>