浮動內聯塊和非浮動塊之間的佈局差異

Question

我正試圖在容器內實現4個水平內嵌塊的簡單佈局。

的HTML：

<div id="wrapper"> 
    <ul id="myList"> 
     <li><p>1</p></li> 
     <li><p>2</p></li> 
     <li><p>3</p></li> 
     <li><p>4</p></li>   
    </ul> 
</div>​ 

我想均勻水平奠定了李的出來。我使用Compass和應用以下：

ul#mylist { 
    @include reset-box-model; 
    @include inline-block-list-container; 
    margin: 0px auto; 
    height: 180px; 
    width: 640px; 

    > li { 
     @include reset-box-model; 
     @include inline-block-list-item(0px); 
     width: 130px; 
     height: 130px; 
     padding: 10px; 
     margin: 0px 5px; 
    } 
} 

見resultant HTML/CSS code and output on jsFiddle。儘管李的尺寸似乎適合...

(130px + (2 * 5px) + (2 * 10px) = 640px)) * 4 = 640px 

...第4個塊被推到下一行。

li只能水平貼合，如果我添加一個float：left;到li's - 請參閱resulting HTML/CSS code and output on jsFiddle。

只是想知道是否有人能解釋這是怎麼回事嗎？我會認爲，浮動：左;因爲內嵌塊li的尺寸合適，所以不需要這麼做嗎？非常感謝你。

Answer 1

顯示：內聯塊會考慮任何周圍的空白。所以，你的li元素之間的換行符有助於寬度

固定例如：http://jsfiddle.net/BL2Wq/8/

編輯：深入文章對這個問題：Fighting the Space Between Inline Block Elements