Question

我正在尝试将五个水平菜单元素与'float：left'对齐，这个元素位于一个容器内，该容器跨越80％的屏幕，最小为960px。为此，我最初将其最小宽度设置为192px（960/5），宽度设置为20％，但很快就意识到这与添加1px边框效果不佳，导致其中一个按钮被“抛出”。

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

是否有更优雅的方式来对齐这些元素并考虑边框，填充等添加的奖励宽度？我尝试过'overflow：hidden'来隐藏任何可能在容器外面戳的东西，但这只是隐藏了整个第5个按钮。

说明结果的图片： enter image description here

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;
}

提前谢谢！

Answer 1

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

此CSS属性将更改元素的框模型，使border包含在width内，而不是像标准框模型那样位于其外部。

这意味着你的盒子将是页面宽度的20％，而不是边框宽度的20％。

问题解决了。

Answer 2

为此，您可以使用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;
    ...
}

Answer 3

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

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

3 个答案: