配售孩子div标签的水平，尽管父div标签宽度

Question

鉴于此CSS：

#parent { 
    width: 100px; 
    height: 100px; 
    background-color: #090; 
} 
.childs { 
    width: 50px; 
    height: 50px; 
    background-color: #009; 
    border: 1px solid #999; 
} 

和这个网站：

<div id="parent"> 
     <div class="childs"><p>aaa</p></div> 
     <div class="childs"></div> 
     <div class="childs"></div> 
    </div> 

这是演示 http://jsfiddle.net/A3PJu/2/

我想要孩子div放置在水平而不是垂直（如他们现在），如何做到这一点？

float: left儿童标签，在这种情况下

Answer 1

您可以使用display：inline-block with white-space：nowrap。像这样写：

#parent { 
     width: 100px; 
     height: 100px; 
     background-color: #090; 
     white-space:nowrap; 
     font-size:0; 
    } 
    .childs { 
     width: 50px; 
     height: 50px; 
     background-color: #008; 
     border: 1px solid #999; 
     display:inline-block; 
     *display:inline;/* For IE7 */ 
     *zoom:1;/* For IE7 */ 
     white-space:normal; 
     font-size:13px; 
     vertical-align:top; 
    } 

入住这http://jsfiddle.net/A3PJu/3/

Answer 2

问题不工作是父元素的宽度不是3次50像素.childs足够大。如果您将#parent的宽度增加为200px，则float: left将起作用。