实现元素的左右移动

我们先来看一下要实现的效果，如下图所示那样，让方框内的元素左右移动。

首先，先写一个简单的结构

<div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

写好了HTML的结构，接下来给元素写样式

ul,li{
    padding: 0;
    margin: 0;
   }
   div{
    width:200px;
    height:200px;
    border: 1px solid black;/*添加边框，方便查看效果*/
    overflow: auto;/*设置溢出的部分隐藏并显示滚动条*/
   }
   div::-webkit-scrollbar{/*这是对滚动进行样式设置*/
    display: none;/*隐藏滚动条*/
   }
   ul{
    list-style: none;
    width: 500px;
    margin-top: 30px;
   }
   ul:after{/*在ul后添加伪类元素*/
    content: "";
    display: block;
    clear: both;/*消除浮动*/
   }
   li{
    float: left;/*让li浮动*/
    width: 100px;
    height: 100px;
    }
    /*给每个li设置不同的颜色*/
   li:nth-child(1){
    background: gray;
   }
   li:nth-child(2){
    background: lawngreen;
   }
   li:nth-child(3){
    background: lightcoral;
   }
   li:nth-child(4){
    background: lightgreen;
   }
   li:nth-child(5){
    background: lightseagreen;
   }

然后鼠标到元素上按shift键+鼠标滚轮就可以左右移动了。