0

好的，伙计们，这是我的问题。我的网站上有一个导航栏，可以由网站管理员自定义 - 他可以将链接添加到导航栏，以便列表具有动态宽度。在栏的右上角，我有一个带有搜索框的 div 元素。这些是这两个 div 的 CSS 属性：

.head_navigation
{
    float:left;
    height:51px;
    padding-top:7px;
    margin:0;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
    text-align: center;
}

.head_navigation_right{
    float:right;
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}

我不能让右 div 填充其左侧的空白区域。由于左侧 div 是动态的，我无法为右侧设置固定边距。我也试过：

width: 100%;

并将正确的 div 放在下面的行并填满整个页面。有什么帮助吗？

4

2 回答 2

1

http://jsfiddle.net/Zx9gw/1/

从 head_navigation_right 中移除 float 属性。

.head_navigation_right{
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}​

不幸的是我不能告诉你为什么会这样，我只能假设：float 改变了一个元素的显示，所以任何其他元素都会占据其余的空间。

于 2012-07-04T11:39:34.263 回答
0

将左右 div 放入具有所需背景的 div 容器中。

例如：

<div id="menuBar">
     <div class="head_navigation"></div>
     <div class="head_navigation_right"></div>
     <div style="clear:both"></div>
</div>

然后给 menuBar 你想要的背景......希望我理解这个问题是正确的。

编辑 - 另一个解决方案

制作 .head_navigation 和 .head_navigation_right 的容器 position:relative; 并给出一个高度，如果没有的话。然后将此应用于您的CSS：

.head_navigation
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    height:51px;
    padding-top:7px;
    margin:0;
    width:100%;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
        text-align: center;
}

.head_navigation_right{

    position:absolute;
    right:0px;
    top:0px;
    z-index:2;
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}
于 2012-07-04T11:38:06.467 回答