css 实现 section(块) 的左右滑动，以及块内文字居中的效果

实现一个左右滑动的的效果（因为这个偶尔会经常的用到，所以做一个整理,供日后参考，写起来也方便些）

直接上代码：HTML:

  <div class="resource_audios_section">
    <ul>
      <li>
        <a href="javascript:void(0);">选择盛大的顾虑是什么？</a> 
      </li>
      <li>
        <a href="javascript:void(0);">你瞅啥，瞅你咋地</a> 
      </li>
      <li>
        <a href="javascript:void(0);">你瞅啥，瞅你咋地</a> 
      </li>
    </ul>
  </div>

---

SCSS：

.resource_audios_section {
  ul {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    display: flex;
    display: -webkit-flex;
    li {
      counter-increment: lilist;
      position: relative;
      width: 180px;
      border-radius: 6px;
      margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 15px;
      background: #fff;
      box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.1);
      display: table;
      font-size: 14px;
      &.selected {
        a {
          color: #97d66d;
          box-shadow: 0px 0px 1px rgba(73, 193, 20, 0.3);
          border: 0.5px solid #c4e2b0;
          border-radius: 5px;
        }
      }
      a {
        width: 150px;
        height: 70px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        padding: 10px;
        text-decoration: none;
        color: #333;
        font-size: 13px;
      }
    }
  }
}

---

Jquery:如果是要实现上面点击变换颜色的那个样式部分，jquery的实现很简单。

  $(function () {
    $(".resource_audios_section ul li").click(function() {
      var $parent = $(this).parent();
      $('.selected', $parent).removeClass('selected');
      $(this).addClass('selected');
    });
  });

颜色点中显示那里，则用到的是cssselected的属性，这个用起来比较方便，类似的还有active 等,css原生带的属性要比直接用jquery获取css的属性值要方便多了。

 &.selected {
     a {
        color: #97d66d;
        box-shadow: 0px 0px 1px rgba(73, 193, 20, 0.3);
        border: 0.5px solid #c4e2b0;
        border-radius: 5px;
      }
   }