아래 이미지와 같이 탭 사각형 모양을 얻을 수있는 CSS 트릭을 알고있는 사람이 있습니까?CSS가있는 탭이있는 사각형 만들기
분명히 한 div를 사용하여이 작업을 수행 할 수는 없지만 한 div를 다른 div에 겹쳐서 테두리에 간격을 두는 것보다 더 좋은 방법을 생각해 낼 수 있습니까? 제발
#handle {
width: 90px;
height: 20px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#menu {
width: 600px;
height: 100px;
border: 1px solid #666;
margin-top: 19px; /* Notice it is one pixel higher then the bottom of the #handle, this covers the top border where the handle is */
}
:
이 내 현재의 솔루션입니다,하지만 난 그게 더 좋을 수 느낌 :
HTML :
<div id="handle"></div>
<div id="menu"></div>
CSS (무시 적이 색상 및 위치 등) 실수가있는 경우 위의 CSS를 수정하지 마십시오. 테스트하지 않았습니다. 그것은 약자로이
많은
이 메뉴에 대한 HTML입니다
UPDATE 감사 의견이 달성 내 현재의 방법을 보여 순전히 :
<nav id="global-nav">
<ul>
<li id="homNav"><a href="#" title="Home"></a></li>
<li id="masNav"><a href="#" title="#">#</a>
<!-- This is where the submenu starts -->
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
<!-- This is where the submenu ends -->
</li>
<li id="shiNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="repNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="setNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
</ul>
</nav>
메뉴의 CSS입니다. (나는 아직 서브 메뉴 CSS를 포함하지 않은) : 나는 경계를 오버레이의 내 원래의 방법이 탭 메뉴를 달성하는 가장 좋은 방법이라고 결론을 내렸다
/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}
#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;cursor:pointer;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}
/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}
/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}
/demos/tabs/ – andyb
cmon, 거기 탭 메뉴에 대한 자습서의 1000s가 있으며 당신도 뭔가를 시도하지 않은거야? – Christoph
그 탭을 보았습니다. 그러나 목록 항목과 아래 메뉴 사이에 테두리와 틈이 있기 때문에 약간 더 복잡합니다. 목록 항목의 높이는 이미 더 높을 수 없습니다. –