CSS难题:孩子们总是闯入多行

Question

也许更有经验的人知道该怎么做，因为我不确定这是否可能与CSS或任何其他方式。目前我有一个父元素(100%宽度)和几个子元素。所有这些子元素都需要留在一行中，所以当父元素溢出时，它就会变成水平可滚动的。就目前而言，当父元素的宽度变得太小时，子元素会不断移动到多行中。代码片段包含确切的CSS，因为它是现在，但我也尝试了display: inline-block;而不是float: left;。

.container {
padding: 16px 24px;
width: 100%;
}
.parent {
padding: 24px 24px 16px 24px;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
.child {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
background-color: grey;
margin-bottom: 16px;
border-radius: 4px;
margin-right: 24px;
height: 255px;
width: 175px;
float: left;
padding: 0;
}

<div class="container">
<div class-"parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>

Answer 1

这应该在CSS中起作用:

.parent {
white-space: nowrap;
overflow: auto;
}
.child {
display: inline-block;
}

不要忘记移除float: left和溢出x/y。

.container {
padding: 16px 24px;
width: 100%;
white-space: nowrap;
}
.parent {
padding: 24px 24px 16px 24px;
width: 100%;
}
.child {
box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
background-color: grey;
margin-bottom: 16px;
border-radius: 4px;
margin-right: 24px;
height: 255px;
width: 175px;
padding: 0;
display: inline-block;
}

<div class="container">
<div class-"parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
</div>