0

我见过几个这样的问题，但没有一个特别适合我的情况。我有一个标签式导航，它可以根据添加到导航中的标签数量来调整大小。然后，我有第二个区域，其中包含我想填充剩余区域的电话号码区域，从右侧延伸到左侧填充空间。

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

可变宽度填充

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

4

3 回答 3

2

假设您的导航选项卡是浮动的，添加overflow: hidden;到深蓝色div（您想要占用剩余宽度的选项卡）就足够了。

小演示：小链接。

于 2012-09-28T14:02:16.463 回答
0

不应该width: 100%做的伎俩？

于 2012-09-28T13:54:11.353 回答
0

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;
}
于 2012-09-28T14:08:44.960 回答