0
  • 我有一个跨越页面的顶部导航
  • 在那个顶部导航中，我有各种元素
    • 两个必须左对齐
    • 一个必须正确对齐的
  • 导航是流动的，元素是固定宽度的
  • 当浏览器窗口最小化时不希望元素换行
  • 由于中国观众较多，需要在 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。

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

4

3 回答 3

0

使用 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;
}
于 2012-11-14T01:34:30.153 回答
0

你想要一个流畅的布局，但流畅的布局最重要的规则不是设置元素的确定宽度，而是你已经设置了宽度。

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/

于 2012-11-14T04:41:37.237 回答
0

我找到了一个适用于所有浏览器的解决方案，特别是 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/

于 2012-11-14T19:49:53.080 回答