css - HTML 元素向右对齐以将左侧空间填充到另一个动态元素

Question

好的伙计们，这是我的问题。我的网站上有一个导航栏，可以由站点管理员自定义 - 他可以将链接添加到导航栏，以便该列表具有动态宽度。在栏的右 Angular ，我有一个带有搜索框的 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 放到下面的行中并填满整个页面。有帮助吗？

Answer 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 会改变元素的显示，因此任何其他元素都会占据剩余的空间。