반응형
<style>
.tabMenu{display: inline-block; margin: 0;padding: 0;}
.tabMenu li{float: left; list-style: none; border: 1px solid red; margin-left: 2px;}
.tabMenu:after{clear: both; display: block; content:'';}
</style>
<ul class='tabMenu'>
<li>탭메뉴1</li>
<li>탭메뉴2</li>
<li>탭메뉴3</li>
<li>탭메뉴4</li>
<li>탭메뉴5</li>
</ul>
:after이라는 가상의 선택자를 두어 tabMenu라는 클래스의 맨 뒤에 아무 내용이 없는 블럭태그와 clear:both 속성을 줌
같은내용 = <div style="clear:both;"></div>를 style만으로 속성을 줌.
반응형
'프로그램 > css' 카테고리의 다른 글
css 우선순위 무시하기. (0) | 2014.12.01 |
---|---|
크로스 브라우징의 초석 reset.css (0) | 2014.11.27 |
객체에 마우스를 올렸을때 배경색 변경 (0) | 2014.11.27 |
css list-style:none 차이점, > 선택자 (0) | 2014.11.27 |
css 만으로 탭메뉴 만드는 원리 (0) | 2014.11.27 |