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/

而不是float：left，使用display：inline-block，你可以在父级上使用white-space：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>

如何防止div＆＃34;溢出：隐藏＆＃34;屏幕调整大小时换到新行

1 个答案: