CSS实现横向滚动

首先添加一段html代码:

    
1
2
3
4
5
6
7
8
9
X
XI

在没有样式情况下这段代码显示效果如下:
CSS实现横向滚动_第1张图片
给item添加样式

      .item {
        width: 100px;
        height: 50px;
        background-color: aqua;
        border-right: 1px solid;
        white-space: nowrap;
        display: inline-block;
      }

CSS实现横向滚动_第2张图片
下面添加样式支持滚动

      .scroll {
        text-align: center;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
      }

效果如下:
CSS实现横向滚动_第3张图片

你可能感兴趣的:(我的前端)