css x轴不滚动_CSS ul 横向滑动并超出屏幕可滑动

大家都知道css中

• 元素中的各条目
• 默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。(有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉)

  效果GIF图：

  密卷.gif

  方案一：

  第一步 ul 中的css设置

  #list { overflow-x: auto; //设置x轴可滑动 list-style: none;//去掉li上的小点 white-space:nowrap;//元素不换行 width: auto;(宽度) }

  第二步 li中的css设置

• .item { margin-left: 20px; //每个li设置间距为20px display: inline-block; //让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }

  先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。

  overflow-x

  这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动

  visible 不裁剪内容，可能会显示在内容框之外。

  hidden 裁剪内容 - 不提供滚动机制。 (和正常的overflow:hidden效果一样)

  scroll 裁剪内容 - 提供滚动机制。 (不管超过屏幕 一直有滚动条)

  auto 如果溢出框，则应该提供滚动机制。(只有超出屏幕 才会有滚动条)

  no-display 如果内容不适合内容框，则删除整个框。 这两个还没有用过

  no-content 如果内容不适合内容框，则隐藏整个内容。

  wid