强制元素水平对齐 [英] Force elements to be horizontally aligned

问题描述

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

Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.

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

Which CSS must I use to force child elements to align horizontally and when the div's width is smaller then the content, display a scrollbar and not overlap one another?

小提琴： 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 ，它将实现你想要的：

if you make the kid an inline-block element and take off the float:left, you can make the parent have white-space:nowrap and it will achieve what you want:

.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/

这篇关于强制元素水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！