[html,css] 가로 스크롤 생기게 하기

*작업환경*

500x100 외부박스 안에 100x100박스 7개가 들어갔을 때, X스크롤 처리

마크업

스타일시트

.wrap {width:500px; height:120px; overflow-x:auto; white-space:nowrap; margin:0 auto}
/*white-space: nowrap;  선언해줘야 내부 박스가 아래로 떨어지지 않고 가로로 나열됨*/

.wrap > ul { font-size:0}
.wrap > ul > li {display:inline-block; font-size:20px; width:100px; height:100px; background:skyblue}
.wrap > ul > li:nth-child(even) {background:pink}