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

问题是父元素的宽度不足以达到50px .childs的3倍。如果将#parent宽度增加到200px，float: left将起作用。

尽管父div标签宽度，但将div标签放在水平方向上

2 个答案: