ul li 태그 가로로(수평) 배열하는 css 설정

 

메뉴를 만들다 보면 ul, li 태그를 사용하는 경우가 있다.

하지만 리스트가 아래로 펼쳐지기 때문에 수평으로 배열하려면 css를 수정해야 된다.

 

아래와 같은 소스가 있다고 가정한다.

실행해보면 아래와 같이 아래로 나열된다.

 

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
</ul>

 

 

 

리스트를 수평으로 배열하기 위해서 css에 코드를 추가해본다.

만약 ul, li 태그가 페이지의 여러 곳에서 사용된다면,

클래스를 추가해서 스타일을 입히거나 html 태그에 직접 style을 추가한다.

 

ul {
    list-style:none;
}
 
li {
    float: left;
}

 

 

 

막상 만들어보니 너무 지저분하다ㅋ

간단하게 스타일을 추가하면~ 끝ㅋ

 

 

* html 실행 사이트: http://www.cssdesk.com/