Div横向排列和出现横向滚动条

发表于 | 分类于
出现横向滚动条

核心思路是使用white-space 这个属性防止父容器内容换行，例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul>
	<li></li>
	<li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<style>
ul{
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
ul li{
  display:inline-block;
  box-sizing: border-box;
}
</style>
You can support me