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

我试图在跨越屏幕80％和最小960px的容器内将五个水平菜单元素与'float：left'彼此相邻。为此，我最初将其最小宽度设置为192像素（960/5），宽度设置为20％，但很快意识到这并不能很好地添加1像素边框，导致其中一个按钮被“抛出”。CSS：包含五个带有边框的浮动20％元素

分别改变宽度为19.895333％和191px，解决了这个问题，但这显然是一个拙劣的解决方案，它在菜单的右侧还留下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; 
}

预先感谢您！

来源

2013-11-01 ividyon

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

来源

2013-11-01 11:38:47

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

此CSS属性将改变盒模型的元素，使得border包含在里面width，而不是在它之外，与标准盒模型。

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

问题解决。

来源

2013-11-01 11:38:24 Spudley

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

来源

2013-11-01 11:41:37 mikel

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

回答

相关问题