카테고리 탭 구현하기

 

요즘 모바일을 보면 이러한 모양의 카테고리 탭들이 있다.

이러한건 어떻게 구현할까 했는데 역시나 구조가 중요했다!!

 

 

html 구조

<div>
    <ul>
        <li>
      	   <a href=""></a>
        </li>
    </ul>
</div>

 

CSS 스타일링 

div {
	overflow: hidden;
	overflow-x: auto;
}

ul {
	display: inline-flex;
}

a {
    display: block;
    padding: 0 15px;
    line-height: 36px; // 높이 유지
    white-space: nowrap; // 글자 아래로 안떨어지게 설정
}

 

- white-space를 줘야 글자가 안떨어진다!!!