css div横向滚动

div横向滚动条进行滚动

<div class="parent">
	<div class="child">我是孩子</div>
	<div class="child">我是孩子</div>
	<div class="child">我是孩子</div>
	<div class="child">我是孩子</div>
	<div class="child">我是孩子</div>
	<div class="child">我是孩子</div>
</div>

css重要代码

.parent {
    
    
	width: 100%;
	white-space: nowrap;
	overflow-x: scroll;
}
.child {
    
    
	display: inline-block;
}

父元素：

1.设置宽度width:100%

2.设置white-space: nowrap;不换行

3.设置横向超出滚动:overflow-x: scroll;

子元素：

1.设置display: inline-block;使子元素都在同一行显示