ul li에 가로 스크롤 적용

심지훈·2021년 6월 12일
0

부스트코스 반응형 과제를 작업하다가 리스트 태그의 속성들을 가로로 배치 한 후 부모요소를 넘어가는 자식 리스트 요소들에 대해서는 스크롤을 하는 기능을 구현한것을 정리하게 되었다.

스크린의 뷰포트가 pc사이즈일때는 float:left 속성을 통해 가로로 정렬했고 이것을 태블릿용 사이즈에 맞추었을때 가로로 정렬함과 동시에 overflow: scroll을 적용하려다가 잘 안됬다. 찾아보니까
float 속성때문에 그런거라고 해서 float 속성을 해제하고
li 요소들에 대해 display: inline-block 속성을 부여 한 후 부모요소에

overflow: scroll;
white-space: nowrap;

스타일링을 적용하니까 잘 구현이 됬다.

profile
유연한 개발자

0개의 댓글