CSS：包含五个带边框的浮动20%元素

我试图将五个水平菜单元素与“float:left”对齐，在一个覆盖80%屏幕、最小960px的容器中彼此相邻。为此，我最初将它们的最小宽度设置为192px（960/5），宽度设置为20%，但很快就意识到，添加1px边框并不能很好地发挥作用，导致其中一个按钮被“抛出船外”

将宽度分别更改为19.895333%和191px，解决了这个问题，但这显然是一个不成熟的解决方案，在菜单右侧也留下了2-3像素的丑陋空间

有没有更优雅的方式来对齐这些元素，并考虑到边框、填充等增加的额外宽度？我尝试过“溢出：隐藏”来简单地隐藏可能戳到容器外面的任何东西，但这只是隐藏了整个第五个按钮

用于说明结果的图片：

html代码：

    <div class="menucontainer">
        <div class="menutab" id="menutab_first">News</div>
        <div class="menutab">Game Guide</div>
        <div class="menutab">Articles</div>
        <div class="menutab">Media</div>
        <div class="menutab" id="menutab_last">Community</div>
    </div>

---

提前谢谢你

您需要的是

框大小：边框框

此CSS属性将更改元素的长方体模型，使
边框包含在
宽度
内，而不是像标准长方体模型那样位于其外部

这意味着您的框将是页面宽度的20%，而不是边框宽度的20%

问题已解决。
为此，您可以使用设置边框，使其显示在元素内而不是元素外：

elem{
-webkit框大小：边框框；/*一些移动浏览器*/
-moz框大小：边框框；/*Firefox*/
框大小：边框框；/*所有其他浏览器IE8+*/
}

边框框

此图元上指定的宽度和高度（以及相应的最小/最大属性）决定了图元的边框框。也就是说，元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制。内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的

因此，对于您的CSS：

.menutab{
...
宽度：20%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
...
}
使边框宽度作为20%的一部分计算。这是最好的解决方案，但如果这会以某种方式干扰布局，另一种方法是使用
calc
从20%中减去边框，例如