Question

我有一个跨页面的顶级导航
在那个顶级导航中，我有各种各样的元素
- 必须左对齐的两个
- 一个必须正确对齐
导航是流畅的元素是固定宽度
当浏览器窗口最小化时，不希望元素包装
由于中国观众众多，需要在IE6上工作。

<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，删除花车

<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;
}

Answer 2

您需要流畅的布局，但流体布局最重要的规则不是设置元素的确定宽度，而是设置宽度。

CSS有一个<style>标签，这不是必需的，可能是你错误地把它。

我在headerContent中设置div的宽度为百分比值。 CSS是

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:28%; 
float:left;
background:#039;
}

.social-buttons { 
width:28%; 
float:left;
background:#060;
}

.signin { 
width:28%; 
float:right;
background:#F00; 
}

刚刚更改了宽度值，在我的浏览器上它看起来很好，比之前的版本更好。这是一个小提琴http://jsfiddle.net/DeepakKamat/s52Hn/8/

Answer 3

我找到了一个适用于所有浏览器的解决方案，特别是IE6，因为这是该项目的要求。如果你有更好的东西来完成同样的事情，请发布！衷心感谢所有回答/帮助的人。

<div id="header2">
    <table id="headerContent2">
        <tr>
            <td id="left" valign="top">
                <div id="leftWrapper">
                <div class="search-list2">Search List</div>
                <div class="social-buttons2">Social Buttons</div>
                </div>
            </td>
            <td id="middle">&nbsp;</td>
            <td id="right" valign="top">
                <div class="signin2">Login Drop Down</div>
            </td>
        </tr>
    </table>
</div>


<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}

#headerContent2 {
width:100%;
}

#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}

.search-list2 { 
width:150px; 
float:left;
background:#039;
}

.social-buttons2 { 
width:200px; 
float:left;
background:#060;
}

.signin2 { 
background:#F00;
float:right;
width:400px;
}

#leftWrapper {
width:400px;    
}

#middle {
width:100%;
}
</style>

看看它在这里工作的演示。复制代码并在所有IE中试用，因为JSfiddle在所有IE中都不起作用。 http://jsfiddle.net/GtXKE/

防止Div元素在流体导航中包裹

3 个答案: