當容器的寬度小於子元素的寬度之和時，如何禁止div元素之間的換行符

Question

我有一個容器div元素和一些子div元素。

<div> 
    <div>foo</div> 
    <div>bar</div> 
    <div>baz</div> 
<div> 

我想水平地列出一行中的子元素沒有換行符。我讀到，我可以使用容器元素上的white-space:nowrap和/或兒童上的display:inline或display:inline-block。這適用於容器的寬度足夠長的情況。

但是，我有一個容器的寬度可能會變得比兒童的寬度的總和短。上述方式在這種情況下不禁止換行。我仍然想禁止換行並強制他們在一條線上，如果容器寬度不夠，額外的子部分是hidden。我怎樣才能做到這一點？

Answer 1

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

#parent{ 
    overflow: hidden; 
    white-space: nowrap; 
} 

.child{ 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
} 

http://jsfiddle.net/YAp6k/