초보가 질문드려요
본문
전체메뉴를 만드는데..
세로 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 현상이 발생하지 않습니다.
