CSS3計算得到100％寬度

有人可以解釋爲什麼div不適合一行嗎？所有的div都有20％的寬度減去20px。前四個div的邊距爲25px。 20 * 5 = 100px 25 * 4 = 100pxCSS3計算得到100％寬度

我不明白。

HTML：

<div class="one-fifth"> 
1 
</div> 

<div class="one-fifth"> 
2 
</div> 

<div class="one-fifth"> 
3 
</div> 

<div class="one-fifth"> 
4 
</div> 

<div class="one-fifth"> 
5   
</div>

CSS：

.one-fifth{ 
    width:calc(20% - 20px); 
    display:inline-block; 
    background-color:red; 
} 
.one-fifth:not(:last-child){ 
    margin-right:25px; 
}

這裏一個的jsfiddle：https://jsfiddle.net/d6dw7bcL/1/

謝謝！

來源

2015-11-03 dezimar

inline-block的元素不會互相粘結，如果HTML代碼中有間距：看http://stackoverflow.com/questions/5078239/how-to-刪除內嵌塊元素的空間 –

非常感謝。我不知道。現在一切都清楚了 – dezimar

空格增加寬度。

註釋出來，像這樣：

</div><!-- 

--><div>

見工作示例here。

但評論只是最簡單的方法來做到這一點。在CSS-Tricks.com上解釋了許多其他方法（其他答案中的一些）。

來源

2015-11-03 19:34:13

爲什麼所有這些答案都被低估了（除了@ nkmol）？這裏有可疑的東西... –

我通常使用註釋來直觀地區分div，但不要留空格。像這樣：

<div class="one-fifth">1</div><!-- 
--><div class="one-fifth">2</div><!-- 
--><div class="one-fifth">3</div><!-- 
--><div class="one-fifth">4</div><!-- 
--><div class="one-fifth">5</div>

來源

2015-11-03 19:35:12

哇！複製我的答案！ =） –

那麼我做了一個JSFiddle，並得到第一... = P –

@喬納森你贏了:) –

事實上，div之後的空白是問題。僅與CSS刪除空格，你可以簡單地float元素：

.one-fifth { 
    float: left; 
}

JSFiddle

來源

2015-11-03 19:40:11 nkmol

起初我認爲這是有保證金的問題，但真正的問題是inline-block的。如果你真的需要使用內聯塊，你可以選擇一些解決方案來改變html代碼，並使用註釋去除這個間距。我寧願將這種責任定義爲CSS，因此您可以使用font-size：0定義父div，並覆蓋div中的字體大小。看到這個例子

body { 
 
    margin: 0; 
 
} 
 
.parent { 
 
    font-size: 0; 
 
} 
 
.one-fifth { 
 
    width: calc(20% - 20px); 
 
    display: inline-block; 
 
    background-color: red; 
 
    letter-spacing: 0; 
 
    font-size:12px; 
 
} 
 
.one-fifth:not(:last-of-type) { 
 
    margin-right: 25px; 
 
}

<div class="parent"> 
 
    <div class="one-fifth"> 
 
    1 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    2 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    3 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    4 
 
    </div> 
 

 
    <div class="one-fifth"> 
 
    5 
 
    </div> 
 
</div>

來源

2015-11-03 20:08:19

這是因爲你使用'20px'的'margin'而不是'25px' – nkmol

這是真的，我現在改變了我的答案。感謝nkmol的觀察 –

CSS3計算得到100％寬度

回答

相關問題