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

【问题标题】：CSS: containing five floated 20% elements with bordersCSS：包含五个带有边框的浮动 20% 元素
【发布时间】：2013-11-01 19:44:35
【问题描述】：

我正在尝试将五个水平菜单元素与 'float:left' 对齐在一个容器内，该容器跨越 80% 的屏幕，最小为 960 像素。为此，我最初将它们的最小宽度设置为 192px (960/5) 并将它们的宽度设置为 20%，但很快意识到这与添加 1px 边框效果不佳，导致其中一个按钮被“扔到海里”。

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

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

一张图来说明结果：

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代码：

.menucontainer {
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: solid;
    border-color: #303030 #101010 #000 #101010;
    border-radius: 0px 0px 8px 8px;
}

.menutab {               
    line-height: 26px;
    float: left;
    width: 19.895333%;
    text-align: center;
    min-width: 191px;
    border-right: 1px solid #202020;
    background-image: url('../img/menubutton2.png');
    background-size: 100% 100%;
    font-family: 'Cabin', sans-serif;
}

#menutab_first {
    border-radius: 0px 0px 0px 8px;
}

#menutab_last {
    border-right: 0px;  
    width: 20%;
    min-width: 192px;  
    border-radius: 0px 0px 8px 0px;
}

提前谢谢你！

【问题讨论】：

标签： css css-float border alignment variable-width

【解决方案1】：

为此，您可以使用box-sizing property 将边框设置为出现在元素内而不是元素外：

elem {
    -webkit-box-sizing: border-box; /* Some mobile browsers. */
    -moz-box-sizing: border-box; /* Firefox. */
    box-sizing: border-box; /* All other browsers IE8+. */
}

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

所以对于你的 CSS：

.menutab {               
    ...
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ...
}

【讨论】：

【解决方案2】：

你需要的是box-sizing:border-box;

此 CSS 属性将更改元素的盒子模型，使 border 包含在 width 内，而不是像标准盒子模型那样包含在它之外。

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

问题解决了。

【讨论】：

【解决方案3】：

box-sizing: border-box 导致边框宽度计为 20% 的一部分。这是最好的解决方案，但如果这会以某种方式干扰您的布局，另一种方法是使用 calc 从 20% 中减去边框，例如width: calc(20% - 2px);

【讨论】：