css实现盒子横向滑动 重要

html-css020

css实现盒子横向滑动 重要,第1张

效果图:

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>

css如何在页面内出现滚动条的地方禁止鼠标滑轮滚动,只能通过鼠标拉滚动条。 css只是层叠样式表,是控制页面的样式的,并不能对一些操作进行控制。至于禁止鼠标滑轮的滚动是需要用js控制的,在js中有一个...

你没写position肯定不行

黄色盒子css样式中加position:relative

粉色盒子中css加position:absolutebottom:0