html 如何横向滚动条,css怎么写 div 显示横向滚动条

最终效果可以看看苹果官网用手机打开的顶部滑动菜单，以下是我写的一个演示DEMO

可以这样写：

HTML:

hello

hello2

hello3

CSS:

.container-wrap {

width: 100%;

height: 50px;

background-color: rgba(0,0,0,0.8);

white-space: nowrap;

overflow: hidden;

overflow-x: scroll; /* 1 */

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

-webkit-overflow-scrolling: touch; /* 2 */

text-align: justify; /* 3 */

&::-webkit-scrollbar {

display: none;

}

}

.container {

}

.container > div {

display: inline-block;

height: 50px;

color: #fff;

text-align: center;

line-height: 50px;

}

.box-1 {

width: 80%;

}

.box-2 {

width: 20%;

}

.box-3 {

width: 20%;

}