[HTML/CSS] li 가로 배치하기

이번 글은 <li> 태그를 가로로 배치하는 방법에 대한 설명글이다.

 

---

 

 

 

방법 1 ) float : left

.gnb li {
    box-sizing: border-box;
    float:left;
    width: 120px;
    text-align: center;
}

 

 

방법 2 ) display : flex

=> display : flex로 가로 정렬을 해준 뒤 flex를 통해 일정한 비율로 간격조정을 해준다

.gnb {
    display: flex;
}
.gnb li {
    flex:1;
    text-align: center;
}

 

 

---