移动端列表超出横向滑动，并隐藏滚动条

vue框架写的一个移动端页面，想要做一个分类展示的页面

<template>
  <div>
    <ul>
      <li>图文分享标题1</li>
      <li>图文分享标题2</li>
      <li>图文分享标题3</li>
      <li>图文分享标题4</li>
      <li>图文分享标题5</li>
      <li>图文分享标题6</li>
      <li>图文分享标题7</li>
      <li>图文分享标题8</li>
      <li>图文分享标题9</li>
      <li>图文分享标题10</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Share',
}
</script>

<style lang="scss" scoped>
ul {
  overflow-x: scroll; //块级元素在水平方向上发生溢出时，显示滚动条，内容会被截断
  white-space: nowrap; //空白文本的处理：合并连续空白符，文本内换行无效
   100%;
}
/* // 谷歌浏览器 隐藏滚动条 */
ul::-webkit-scrollbar {
  display: none;
}
/* // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条 */
ul {
  scrollbar- none;
  /* Firefox */
  -ms-overflow-style: none;
}
li {
  display: inline;
  margin: 2% 4%;
}
</style>

　　参考文章：https://blog.csdn.net/qq_37585017/article/details/106221941