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%;

}


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部