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. 幅幅を設定します: 100%

2. ホワイトスペースを設定します: nowrap; 折り返さない

3. 水平オーバーフロースクロールを設定します。overflow-x:scroll;

子要素:

1. すべての子要素が同じ行に表示されるように、display: inline-block; を設定します。