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/