Question

假设我的div中有随机的孩子，其固定的高度和宽度设置为100％，以便在布局中呼吸。

我必须使用哪个CSS强制子元素水平对齐，当div的宽度小于内容时，显示滚动条而不相互重叠？

简单的css：

.parent{
    width:500px;
    height: 50px;
    background-color: red;
}
.kid{
    width: 150px;
    height: 20px;
     background-color: green;
    float:left;
    margin-left:4px; 
}

Answer 1

如果你让孩子成为inline-block元素并取消float:left，你就可以让父母拥有white-space:nowrap并且它会达到你想要的效果：

.parent{
    width:300px;
    height: 50px;
    background-color: red;
    white-space:nowrap;
    overflow-x:scroll;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    display:inline-block;
    margin-left:4px;

}

http://jsfiddle.net/GRBc6/6/

Answer 2

您需要向.parent添加2个属性：overflow-x:scroll和white-space:nowrap，并将孩子的float属性更改为display: inline-block。这是工作代码：

.parent{
    width:500px;
    height: 50px;
    background-color: red; 
    overflow-x: scroll;
    white-space: nowrap;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    margin-left:4px; 
    display: inline-block;
}

Answer 3

或者您可以只使用一行表格， tr → td 所以它不会让它里面的元素包裹

强制元素水平对齐

3 个答案: