强制元素水平对齐答案

【问题标题】：Force elements to be horizontally aligned强制元素水平对齐
【发布时间】：2013-03-12 03:15:22
【问题描述】：

假设我的 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; 
}

【问题讨论】：

浮动：左？溢出-x：滚动？
你可以试试上面的fiddle 不行。

标签： css horizontal-scrolling

【解决方案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/

【讨论】：

完美运行。谢谢！我错过了这个：white-space:nowrap;

【解决方案2】：

您需要在.parent 中添加两个属性：overflow-x:scroll 和white-space:nowrap，并将kids 的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;
}

【讨论】：

【解决方案3】：

否则你可以只使用单行表格，tr → td 所以它不会让里面的元素包裹起来

【讨论】：

表格用于表格数据
如果容器div不固定也可以这样使用
我猜你不会在意编码标准然后w3.org/WAI/wcag-curric/sam48-0.htm
我更担心如何通过css制作具有非固定宽度的水平画廊，但无法弄清楚。你能为此提出任何解决方案吗？
因为如果你不让容器元素固定宽度，所有那些空白和内联块元素都不会工作，所以内容也会换行。如果我不知道画廊的实际宽度（我不知道，就动态添加的内容而言），你不能像那样指定它的宽度。