强制元素水平对齐

Question

假设我的div中有随机的子元素，它的高度和宽度固定为100％，以便与布局呼吸。

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

小提琴：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; 
} 

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 所以它不会让里面的元素包裹