css/html滚动的问题

今天真的 是苦恼了一天，前端其实也很磨人呀。
滚动条的问题，我遇到的问题可以说是五花八门，然后其实都是一些很简单的事情。

  <div class="scroll">
       <div class="contain">
         <img class="java" src="./images/java.png">
         <p class="marking">JAVA</p>
       </div>
       <div class="contain">
         <img class="java" src="./images/h5.png">
         <p class="marking">前端</p>
       </div>
       <div class="contain">
         <img class="java" src="./images/java.png">
         <p class="marking">JAVA</p>
       </div>
       <div class="contain">
         <img class="java" src="./images/h5.png">
         <p class="marking">前端</p>
       </div>
       <div class="contain">
         <img class="java" src="./images/java.png">
         <p class="marking">JAVA</p>
       </div>

在css里面是

body{
 .design{
   .scroll{
   white-space: nowrap;
   width: 100%;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
     .contain{
       width: 91px;
       height: 141px;
       background-color: #fff;
       text-align: center;
       margin-right: 71px;
       display: inline-block;
      .java{
         width: 90px;
         height: 90px;}

       .marking{
         height: 39px;
         opacity: 1;
         color: rgba(0,0,0,1);
         font-size: 28px;
         font-weight: 400;
         font-family: "PingFang SC";
       /*  margin-top: 10px;*/
         text-align: center;
       }
   }
   .contain:nth-child(1){margin-left: 10px;}
   .contain:nth-child(5){margin-right: 10px;}
   }
 }
}

实现的效果是

有了滚动条，可以滚动，现在 还没学习如何消除滚动条，慢慢来。下次更新

遇到的问题

• 要是不设置white-space:nowrap那么他是两行的，是不会滚动的。设置这个就是为了强制在一行上，那么设了这个 Java和他的图片就不在一行上面了，我之前用的span 去设的字，其实他就是一行的，我们应该 要用 一个块状元素去解决这个问题。所以图片下面 的字一定要用p元素或者div不要用span