css实现盒子横向滑动 重要

2021-07-22  本文已影响0人  程序媛_

效果图:

css

.box {

background: #eee;

padding: 10px 0;

white-space: nowrap;

/*文本不会换行,文本会在在同一行上继续*/

overflow-y: auto;

/*可滑动*/

}

/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/

.box::-webkit-scrollbar {

display: none;

}

.box1 {

width: 49%;

margin-left: 3%;

height: 100px;

background: #fff;

display: inline-block;

/*行内块元素*/

}

html:

<div class="box">

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

</div>

上一篇下一篇

猜你喜欢

热点阅读