1

我正在尝试将五个水平菜单元素与'float：left'在一个跨越屏幕80％且最小为960px的容器内对齐。为此，我最初将它们的最小宽度设置为 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;
}

先感谢您！

4

3 回答 3

1

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

于 2013-11-01T11:41:37.390 回答
1

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

这个 CSS 属性将改变元素的盒子模型，使得border包含在 中width，而不是像标准盒子模型那样包含在它之外。

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

问题解决了。

于 2013-11-01T11:38:24.813 回答
1

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

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

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

因此，对于您的 CSS：

.menutab {               
    ...
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    ...
}
于 2013-11-01T11:38:47.947 回答