7

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

3 回答 3

14

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

于 2013-03-22T10:05:43.610 回答
0

您需要将 2 个属性添加到.parent:overflow-x:scroll和white-space:nowrap，并将floatkids 的属性更改为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;
}
于 2013-03-22T10:17:17.707 回答
-1

或者你可以只使用单行的表格，tr → td 所以它不会让里面的元素换行

于 2013-03-22T10:18:19.113 回答