以自定义宽度为中心定位浮动元素

Question

今天，我正面临着一个大问题，那就是将浮动元素居中设置自定义宽度。为了更好地解释我做了一个片段给你：

body { text-align: center; } 
 
.square { 
 
    width: 20%; height: 100px; 
 
    background: cornflowerblue; 
 
    float: left; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
}

<div> 
 
    <div class="container"> 
 
    <div class="square">a</div> 
 
    <div class="square">b</div> 
 
    <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
    <div class="square">a</div> 
 
    <div class="square">b</div> 
 
    <div class="square">c</div> 
 
    <div class="square">d</div> 
 
    <div class="square">e</div> 
 
    </div> 
 
</div>

的问题是，前三个正方形得到定心后收缩。

我将元素浮动的原因是第二个容器必须与第一个容器相同，并且它必须包含5个元素（以覆盖文档的整个宽度）。这里是如何看起来像没有浮动（见元素之间的GABS）：

body { text-align: center; } 
 
.square { 
 
    width: 20%; height: 100px; 
 
    background: cornflowerblue; 
 
    display: inline-block; 
 
} 
 

 
.container { 
 
    display: block; 
 
}

<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
     <div class="square">d</div> 
 
     <div class="square">e</div> 
 
    </div> 
 
</div>

现在的元素有权宽度，但第二线不包括因的文档宽度元素之间的gabs。

有什么办法让自定义宽度居中的浮动元素？我应该使用哪种样式的容器元素？

Answer 1

OK，我想我得到了你所需要的

.square { 
width: 20%; height: 100px; 
background: cornflowerblue; 
display: inline-block; 
font-size: 1rem; 
} 

.container { 
display: block; 
font-size:0; 
} 

jsfiddle

Answer 2

body { text-align: center; } 
.square { 
    width: 20%; height: 100px; 
    background: cornflowerblue; 
    float: left; 

} 

.container { 
width:100%; 
margin-right:20%; 
margin-left:20%; 
} 

您正在寻找这样的事情？

Answer 3

添加min-width:7px;这将解决您的问题

body { text-align: center; } 
 
.square { 
 
    width: 20%; 
 
    height: 100px; 
 
    background: cornflowerblue; 
 
    float: left; 
 
    min-width:7px; 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
}

<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <div class="container"> 
 
     <div class="square">a</div> 
 
     <div class="square">b</div> 
 
     <div class="square">c</div> 
 
     <div class="square">d</div> 
 
     <div class="square">e</div> 
 
    </div> 
 
</div>

这里你5格列时代也在努力。