[list] BS5 - .list-inline 클래스 - 모든 리스트를 옆으로 나열 (= .list-inline클래스 = 리스트인라인클래스)

1. .list-inline 예제 - 리스트를 옆으로 나열
2. .list-inline 정의

.list-inline 예제 - 리스트를 옆으로 나열

 

<div class="container mt-3">

  <ul class="list-inline">

    <li class="list-inline-item">홈짱닷컴</li>

    <li class="list-inline-item">Homzzang.com</li>

    <li class="list-inline-item">홈페이지 제작관리 강의</li>

  </ul>

</div>

 

결과보기

.list-inline 정의

 

리스트 아이템을 옆으로 나열.

• .list-unstyled 클래스와 스타일정의 동일. (단, 용도는 다름.)
• <ol>/<ul> 태그 둘 다에 사용 가능.
• 각 <li> 요소에 적용되는 .list-inline-item 클래스와 함께 사용.

 

---

[정의]

 

.list-inline {

  padding-left: 0;

  list-style: none;

}

.list-inline-item {

  display: inline-block;

}

.list-inline-item:not(:last-child) {

  margin-right: 0.5rem;

}