<ul class="scroll">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
- auto:只有当内容溢出时,才显示滚动条。
- scroll:无论是否溢出都显示滚动条。主要为了布局统一,防止滚动条有无导致布局偏差。
.scroll {
white-space: nowrap; /* ul中的内容不换行 */
overflow-x: scroll; /* 横向滚动 */
overflow-y: hidden; /* 禁止纵向滚动*/
}
ul li {
display: inline-block;
width: 150px;
height: 100px;
background-color: orange;
margin: 10px;
}