Snippet 본문

탭별 너비 유동형

등록
민소라, 신예호 (등록일 : 2012/01/16    최종수정일 : 2013/12/20)
Type
PC
설명
탭별 너비가 글자수에 따라 유동적인 형태
미리보기
Html
<ul class="tab_comm">
	<li class="on"><a href="#none" class="link_tab">메뉴 A</a></li>
	<li><a href="#none" class="link_tab">메뉴 글자가 길어진 B</a></li>
	<li><a href="#none" class="link_tab">메뉴 C</a></li>
</ul>
CSS
.tab_comm {display:block;overflow:hidden;height:34px;border-top:2px solid #585f6f;border-right:1px solid #e4e4e4;background:url(/snippet/image?idx=340) repeat-x 0 0}
.tab_comm li {float:left}
.tab_comm .link_tab {float:left;width:auto;height:24px;padding:10px 25px 0 25px;border-left:1px solid #e4e4e4;font-weight:bold;font-family:'굴림',gulim,sans-serif;color:#888;text-align:center;letter-spacing:-1px}
.tab_comm .link_tab:hover {text-decoration:none}
.tab_comm .on .link_tab {position:relative;margin-right:-1px;border-right:1px solid #cdcdcd;color:#53abe7;border-left:1px solid #cdcdcd;background-color:#fff}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기