1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html 如何横向滚动条 css怎么写 div 显示横向滚动条

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

时间:2021-11-24 04:54:14

相关推荐

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

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。