用overflow:scroll
会带来滚动条,那么如何去除呢?
我这里用的方法,是在用该属性的元素外,再次套一个父元素,并让滚动的内容区的高度和该父元素的高度相同。
直接上代码,以下是未套元素前:
html代码
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
---------------------------------
css代码
ul {
height: 3rem;
white-space: nowrap;
overflow: scroll;
}
ul li {
display: inline-block;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
border: 1px solid black;
border-radius: 100%;
width: 2rem;
height: 2rem;
}
页面如下:
是有滚动条的,因为滑动的时候才会显示,所以这里不太好截图,这里没显示出来。
(注意:滚动条是在ul中显示出来的,我们现在要做的是,把它挤出所套的父元素区域,接着给父元素加上overflow:hidden即可。)
下面我们给ul增加一个父元素。
<div class="parent">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
div.parent {
height: 2.9rem;
overflow: hidden;
}
div.parent ul {
height: 3rem;
white-space: nowrap;
overflow: scroll;
}
div.parent ul li {
display: inline-block;
margin: 0.2rem 0.2rem 0.2rem 0.2rem;
border: 1px solid black;
border-radius: 100%;
width: 2rem;
height: 2rem;
}