CSS实现div里面的内容超滚动

html代码：

?

1 2 3 4 5 6 7 8

<div class="box"> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>

CSS代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.box { margin: 0 auto; width: 800px; height: 400px; background-color: aqua; overflow: scroll; /*超出部分滚动不换行（overflow-x 横向 overflow-y纵向）*/ white-space: nowrap; /*超出不换行，必须加，否则横向超出部分会自动换行*/ } .content { display: inline-block; /*切记不能使用flex*/ background-color: yellowgreen; margin-left: 50px; width: 200px; height: 800px; }

效果如下：