强制元素水平对齐

假设我的 div 中有随机的子元素，其固定高度和宽度设置为 100%，以便与布局同步。

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

Fiddle:http://jsfiddle.net/GRBc6/1/

简单的CSS：

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

如果你让孩子成为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/