不能對齊6周div的超過總寬度

我做了這個網站不能對齊6周div的超過總寬度

<body style="margin:0px"> 

<div class="statbar"> 
<div class="stat">sd</div> 
<div class="stat">sd</div> 
<div class="stat">sd</div> 
<div class="stat">sd</div> 
<div class="stat">sd</div> 
<div class="stat">sd</div> 

</div> 
</body>

由於頁顯示在不同的分辨率，我使用百分比。我希望所有div之間的空間相同。

所以我有6個div，所以它們之間有7個間距。

100％-7％（每個間距1％）= 93％。 93％/ 6 = 15.5％每格。

所以，我用這個CSS：

.stat{ 
background-color: #0072C6; 
width: 15.5%; 
height: 50px; 
margin-top: 5px; 
margin-bottom: 5px; 
margin-left: 1%; 
margin-right: 0px; 
display:inline-block; 
padding:0px; 
border:0px; 

} 

.statbar{ 
display:inline-block; 
padding:0px; 
margin:0px; 
width:100%; 
}

總應該是總數的100％寬度的99％，但它仍然不適合。爲什麼？

來源

2014-02-24 Mbrouwer88

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ –

您的百分比很好，但是由於您將顯示更改爲內嵌塊，因此元素現在對代碼中的空白區域很敏感。嘗試使用此方法解決它：

<div class="statbar"><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div></div>

jsFiddle example

的另一種方法除去白色空間是使用HTML註釋，如：

<div class="statbar"> 
    <div class="stat">sd</div><!-- 
    --><div class="stat">sd</div><!-- 
    --><div class="stat">sd</div><!-- 
    --><div class="stat">sd</div><!-- 
    --><div class="stat">sd</div><!-- 
    --><div class="stat">sd</div> 
</div>

jsFiddle example

一處理空間的其他技術就是如此將父元素的字體大小設爲零，然後選擇您喜歡的任何非零大小。

jsFiddle example

最後，你可以浮在統計的div：

.stat { 
    background-color: #0072C6; 
    width: 15.5%; 
    height: 50px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    margin-left: 1%; 
    margin-right: 0px; 
    display:inline-block; 
    padding:0px; 
    border:0px; 
    float:left; 
}

jsFiddle example

來源

2014-02-24 20:32:58 j08691

我已經移除的CSS樣式的不必要的代碼。這裏是working demo。

.stat { 
    background-color: #0072C6; 
    width: 15.5%; 
    height: 50px; 
    display:inline-block; 
    padding:0 auto; 
    margin:0 auto 
} 

.statbar { 
    width:100%; 
}

來源

2014-02-24 20:39:31

不能對齊6周div的超過總寬度

回答

相關問題