가로 네비게이션 바를 만드는 방법에는 두 가지가 있습니다.
인라인(inline) 또는 플로팅(floating) 목록 항목 사용하는 것입니다.\

가로 네비게이션 바를 만드는 한 가지 방법은 이전 페이지의 “표준”코드 외에도, <li> 요소를 인라인(inline)으로 지정하는 것입니다.

• Home
• News
• Contact
• About

• display: inline; - 기본적으로 <li> 요소는 블록 요소입니다. 여기서는, 각 목록 항목 앞뒤의 줄 바꿈을 제거하여 한 줄에 표시합니다.
  

가로 네비게이션 바를 만드는 또 다른 방법은 <li> 요소를 플로팅하고, 네비게이션 링크의 레이아웃을 지정하는 것입니다.

• Home
• News
• Contact
• About

Note:If a !DOCTYPE is not specified, floating items can produce unexpected results.

A background color is added to the links to show the link area. The whole link area is clickable, not just the text.

Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list..

• float: left; - float를 사용하여 블럭 요소들을 서로 옆으로 배치되게 합니다.
• display: block; - 패딩(그리고 원하는 경우, 높이, 너비, 마진 등)을 지정할 수 있습니다.
• padding: 8px; - 블럭 요소는 사용 가능한 전체 너비를 차지하므로 나란히 float할 수 없습니다. 그래서 패딩을 지정하여 보기 좋게 만듭니다.
• background-color: #dddddd; - 각 요소에 회색의 배경색을 추가합니다.

Tip: 전체 너비의 배경색을 원하는 경우, 각 <a> 요소 대신 <ul>에 배경색을 추가합니다.

• Home
• News
• Contact
• About

A background color is added to the list instead of each link to create a full-width background color

Note: overflow:hidden is added to the ul element to prevent li elements from going outside of the list.

어두운 배경색으로 기본 가로 네비게이션 바를 만들고, 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.

• Home
• News
• Contact
• About

현재 링크에 “active” 클래스를 추가하여, 사용자가 어느 페이지에 있는지 알 수 있습니다.

• Home
• News
• Contact
• About

목록 항목(list items)을 오른쪽으로 플로팅하여, 링크를 오른쪽 정렬합니다 (float : right;):

• Home
• News
• Contact
• About

링크 구분선(link dividers)을 만들려면 border-right 속성을 <li>에 추가합니다:

• Home
• News
• Contact
• About

사용자가 페이지를 스크롤 하더라도, 내비게이션 바를 페이지 상단 또는 하단에 유지합니다.

• Home
• News
• Contact
• About

• Home
• News
• Contact
• About

Note:고정 위치(fixed position)는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.

얇은 회색 보더가 있는 회색 가로 네비게이션 바의 예제: