子元素横向排列，超过父容器宽度不换行纯css方法

[zhouwenbin]

子元素横向排列，超过父容器宽度不换行一般用来制作slider效果。如果使用float来布局，要使用js来设置父容器的宽度，所以我们要用css来自适应，省去一些计算。

inline-block方法

inline-block是常用的方法，父容器强制不换行就可以实现。

ul{
  white-space:nowrap;
  font-size:0;
}
li{
  display:inline-block;
}

demo点这里

flex方法

这个思路会比较新颖，flex:shrink:0来强制不缩放，子元素就能超出父容器排列。

ul{
  display:flex;
}
li{
  flex-shrink:0;
}

demo点这里