IE 11 리스트 간격 설정

리스트로 받아온 데이터를 위와 같이 ul의 양옆에 빈공간 없이 꽉차게 정렬해야 하는 경우가 있었습니다. 최신 문법을 사용하는 경우 gap: 10px 으로 간편하게 할 수 있지만 IE에서는 gap이 지원되지 않는 문제가 존재하였습니다.

IE 11에서 사용

1. HTML 작성
   아래와 같이 ul 안에 li가 존재하며 한줄로 보여주어야 합니다.

   	<ul>
           <li><div></div></li>
           <li><div></div></li>
           <li><div></div></li>
           <li><div></div></li>
       </ul>

2. ul에 CSS 적용
   • width를 실제 크기 + 간격 으로 설정합니다.
   • margin-left를 간격 / 2 만큼으로 설정합니다.
   ul에는 위 두가지만 적용하면 됩니다. li 사이 간격을 10px로 설정한다고 가정해보겠습니다.

   	ul {
       	display: flex;
           flex-wrap: wrap;
           width: calc(100% + 10px);
           margin-left: -5px;
       }

3. li에 CSS 적용
   • padding-left와 padding-right에 간격 / 2 만큼으로 설정합니다.
     

   	width: 25%;
       padding: 0 5px;
       box-sizing: border-box;

위와 같이 적용하면 정상적으로 나오게 됩니다.

만약 li에 background를 설정해야하는 경우 li에 자식 태그를 생성하여 자식 태그에 background를 설정하여야 원하는 결과를 얻을 수 있습니다.

gap 사용

gap 을 지원하는 브라우저에서는 아래 설정으로 동일한 레이아웃 설정이 가능합니다.

ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

li {
	width: 100%;
}