用div填充剩余宽度，没有设置尺寸

Question

我已经看过其中的几个问题，但没有一个特别适合我的情况。我有一个标签式导航，可以根据添加到导航的标签数量进行缩放。然后，我有第二个区域，其中包含电话号码区域，我希望填充剩余区域，从右侧延伸到左侧填充空间。

我不知道任何一个物体的宽度。我最接近的解决方案是向左浮动导航，然后导航后面的蓝色区域扩展，这不是我想要的，因为我仍然能够看到标签间隙之间的背景。我试过表，但无法让它工作。它要么只给它蓝色区域的宽度然后给导航剩余而不填充中间的空间，或者在另一种配置中它会将包含的表的大小折叠到2个元素的宽度组合而不填充全宽960像素。

理想情况下，我希望找到一个CSS解决方案，但我不反对JS或jQuery。

Answer 1

假设您的导航标签已浮动，则将overflow: hidden;添加到深蓝色div（您想要占用剩余宽度的那个）就足够了。

小演示：little link。

Answer 2

width: 100%不应该这样做吗？

Answer 3

jsfiddle上的工作代码here

<div class="base">
    <div class="menu">
        <ul>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
    <div class="extra">
        Hello is nothing but Hello
    </div>
    <br clear="all"/>
</div>

CSS：

.base{
   width:100%;
   background:#c00;
   color:#fff;
   padding-top:15px;    
}
.menu{
    float:left;
}
.menu ul li{
    float:left;
    margin-left:5px;
    margin-right:5px;
    background:#000;
    padding:3px;
    border-radius:8px 8px 0px 0px;

}
.extra{
   float:right;
}