CSS3计算得到100％宽度

Question

有人可以解释为什么div不适合一行吗？所有的div都有20％的宽度减去20px。前四个div的边距为25px。 20 * 5 = 100px 25 * 4 = 100px

我不明白。

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/

谢谢！

Answer 1

空格增加宽度。

注释出来，像这样：

</div><!-- 

--><div> 

见工作示例here。

但评论只是最简单的方法来做到这一点。在CSS-Tricks.com上解释了许多其他方法（其他答案中的一些）。

Answer 2

我通常使用注释来直观地区分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> 

Answer 3

事实上，div之后的空白是问题。仅与CSS删除空格，你可以简单地float元素：

.one-fifth { 
    float: left; 
} 

JSFiddle

Answer 4

起初我认为这是有保证金的问题，但真正的问题是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>