전체메뉴를 만드는데..
세로 3단 가로로 4단 배치하려는데...아래css를 어떻게 해야 가로로 배치될까요?
<ul>
<li class="dropdown">
<a href="#" class="dropbtn"><i class="fa fa-bars"></i></a>
<div class="dropdown-content">
<a href="#">전체메뉴1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="dropdown-content">
<a href="#">전체메뉴2</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="dropdown-content">
<a href="#">전체메뉴3</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="dropdown-content">
<a href="#">전체메뉴4</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
답변 2개
<style> .dropdown-content { float:left; } .clear { clear:both; }</style><ul> <li class="dropdown"> <a href="#" class="dropbtn"><i class="fa fa-bars"></i></a> <div class="dropdown-content"> <a href="#">전체메뉴1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="dropdown-content"> <a href="#">전체메뉴2</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="dropdown-content"> <a href="#">전체메뉴3</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="dropdown-content"> <a href="#">전체메뉴4</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li></ul><!-- float 끝난 이후에 float 속성 초기화 --><div class="clear"></div>위 소스로 하시면될거에요.
float:left 로 해주시면 선언한 div 가 왼쪽 정렬이 됩니다. right 로 해주시면 오른쪽 정렬이 되겠죠.
그리고 float 명령어가 끝나고 clear:both 를 해주세요.
그래야 다음 행에서 float 현상이 발생하지 않습니다.
sinbi가로로 나열하고 싶은 요소에 float:left 속성을 주면 됩니다.
float 속성 사용법: http://www.homzzang.com/b/css-105
답변을 작성하려면 로그인이 필요합니다.