这时，我们的选项卡宽度就不能是一个固定值，而要使用百分比了。对于2、4、5这样能被100%整除的数，这个取值很容易，每个选项卡的宽度就是50%、25%、20%；对于3、6、7这样不能整除的数，应该怎么办呢？哈，幸好我们还有一点数学基础,以一组3个选项卡为例：33.3% + 33.3 + 33.4%这样的分法也不错，加起来能够凑到100%，选项卡之间0.1%的宽度差，应该是0.3-0.4像素，可以忽略。好，让我们看看这样的分法结果如何？

FireFox、ie下，如上图，非常和谐。

Safari和Chrome下：

哈哈，好像就不那么完美了。在选项卡数量为3、5个时，我们发现选项卡比下面的内容宽度短了两三个像素，这——是为什么呢~~？–小沈阳问。

让我们先来看看这些选项卡的html代码结构：

<div>
    <ul>
        <li><a href="#">今日要闻</a></li>
        <li><a href="#">直播大厅</a></li>
        <li><a href="#">今日要闻</a></li>
    </ul>
    <div></div>

</div>其中，包围在最外面的div.w320，规定的是这个模块的宽度，这里模仿iPhone竖屏时的宽度320px—横屏时就是w480。这里我们给页面两边留的空隙是4px，有效内容宽度是312px。

.w320{width:312px; padding:0 4px; margin:5px 0;}

出处：腾讯WSD
责任编辑：bluehearts

上一页 一个选项卡宽度的哥德巴赫猜想 [1] 下一页 一个选项卡宽度的哥德巴赫猜想 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。