爲什麼我的內聯塊元素不斷地打包？

Question

這裏是一個小例子：http://www.cssdesk.com/QXmaG

HTML：

<div id="blockHolder"> 
    <div class="inlineblock"></div> 
    <div class="inlineblock"></div> 
    <div class="inlineblock"></div> 
    <div class="inlineblock"></div> 
</div> 

CSS：

body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 100px; 
    font-size: 13px; 
} 

.inlineblock{ 
    width:400px; 
    height:200px; 
    display:inline-block; 
    background:red; 
    white-space: nowrap; 
} 

#blockHolder{ 
    width:auto; 
    height:100%; 
} 

而且我要爲inline-block項目，以保持排隊（水平）在其父容器#blockHolder在這個例子中。

爲什麼white-space:nowrap無法正常工作，我該如何達到理想的效果？

謝謝！

Answer 1

添加，whitespace: nowrap到#blockHolder：http://jsfiddle.net/3LQJG/。

#blockHolder { 
    white-space: nowrap; 
} 

Answer 2

使用display:table-cell;

.inlineblock{ 
    width:400px; 
    height:200px; 
    display:table-cell; 
    background:red; 

} 

參見：http://www.cssdesk.com/maCKQ

Answer 3

在body，添加：

width: 100%; 

CSS：

body { 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    padding: 100px; 
    font-size: 13px; 
    width: 100%; 
} 

Demo

Answer 4

white-space：nowrap指定段落中的文本永遠不會換行，對div不起作用。 您需要爲#blockHolder添加一個寬度。