css - 防止 Div 元素在流畅的导航中换行

Question

• 我有一个横跨整个页面的顶部导航
• 在那个顶部导航中我有各种元素
  • 两个必须左对齐
  • 必须正确对齐
• 导航是流动的，元素是固定宽度的
• 不希望元素在浏览器窗口最小化时换行
• 由于中国观众较多，需要在 IE6 或更高版本中工作。

请看这里的例子: http://jsfiddle.net/4SUwg/

<div id="header">
  <div id="headerContent">
    <div class="search-list"> Search List </div>
    <div class="social-buttons"> Social </div>
    <div class="signin"> Login Drop Down </div>
  </div>
</div>

我希望导航中的 div 元素不换行。我在堆栈上四处搜索，可以找到接近但没有完全解决问题的答案。我需要让 div 元素正确对齐使事情变得复杂。必须适用于所有浏览器，尤其是 IE。

提前感谢大家的帮助!!!

Answer 1

使用 SPAN .. 它是 INLINE 而不是 BLOCK ??

<div id="header">
  <div id="headerContent">
     <span class="search-list"> Search List </span>
     <span class="social-buttons"> Social </span>
     <span class="signin"> Login Drop Down </span>
  </div>
</div>

还有你的 CSS，移除 float

<style>
body {
margin:0;
padding:0;
}

#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}

#headerContent {
height: 32px;
border:1px dashed #fff;
}

.search-list {
width:150px;

background:#039;
}

.social-buttons {
width:150px;

background:#060;
}

.signin {
width:200px;

background:#F00;
}