html - 将子 div 标签水平放置，尽管父 div 标签宽度

Question

鉴于这个CSS：

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

这个html：

   <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与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 倍 50px .childs。如果你将#parent宽度增加到 200px，float: left就可以了。