以自定義寬度爲中心定位浮動元素

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格列時代也在努力。