[HTML/CSS]ul li 태그목록을 가로로 정렬하는 방법

HTML/CSS 작업을 하다보면 메뉴버튼을 가로로 정렬하고 싶을 경우가 생깁니다.

 

ul의 기본 속성 값이 세로로 나열되고, 앞쪽에 검정색 동그라미로 메뉴가 구별되어지는데, 이부분으 문저 제거하고 가로로 배치되도록 수정하겠습니다.

저는 CSS를 사용해서  menu를 만들었고 menu안에 list-style-type: none; 을 입력했습니다.

 

위에서 사용한 ul lu {list-style-type: none;} 을 사용하면 리스트의 스타일을 제거한다는 뜻이 됩니다.

 

margin-left: 10px;

이후에 box에서 float: left; 를 적용하면 가로로 배치되게 됩니다. 그리고 margin-left 를 사용해서 간격의 조절을 했습니다.

현재의 경우 10px를 줬는데 30으로 늘려본다면 더 넓게 배치될 것입니다.

 

margin-left: 30px;

 

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어