어제 ucweb을 사용하는 goos의 게시물을 봤습니다. Float 메뉴가 수평으로 중앙에 위치할 수 없다고 누가 말했습니까 ? 들어가서 살펴보니 음수 여백, position:relativel; 등을 사용하는 방법이 약간 번거롭다는 것을 알았습니다. 해킹.
여기에는 더 간단한 방법이 있는데 먼저 보여 드리겠습니다.
사실 밖에 div를 하나 더 놓았어야 했는데, 탄소배출량을 줄이기 위해 버렸습니다.
코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일 유형="텍스트/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#탐색 li{height:30px;float:left;}
#탐색 li a{float:left;height:30px;line-height:30px;padding:0 23px;배경:#97C099;}
#탐색 li a:hover{배경:#59c099;색상:#fff;}
</style>
<!--[IE 7인 경우]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>이기는 방법은 플로팅 메뉴</title>
</head>
<본문>
<ul id="탐색">
<li><a href="#">홈</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">저장</a></li>
<li><a href="#">그룹</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">도움말</a></li>
</ul>
</body>
</html>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]
가장 중요한 것은 이 문장이다.
<!--[IE 7인 경우]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
IE의 하위 버전을 처리하기 위해 여기서는 조건부 주석을 사용합니다. IE7 이하에서는 display:inline;의 기능이 inline-block;과 동일하다고 생각됩니다.
슬라이딩 도어 탐색은 위 코드에서 발전했습니다.
코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<스타일 유형="텍스트/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#탐색 li{height:30px;float:left;}
#탐색 li a{float:왼쪽;배경:#97C099 url( ) 오른쪽 -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#탐색 li a:hover,#탐색 li.current a{배경-위치:왼쪽 -176px;색상:#009;배경-색상:#8597B5;}
#탐색 li a:hover 범위,#navigation li.current a 범위{배경 위치:오른쪽 -528px;}
#navigation li.current a{font-weight:bold;}
</style>
<!--[IE 7인 경우]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>위 코드에 따라 슬라이딩 도어 스타일로 업그레이드</title>
</head>
<본문>
<ul id="탐색">
<li><a href="#"><span>홈</span></a></li>
<li><a href="#"><span>뉴스</span></a></li>
<li class="current"><a href="#"><span>저장</span></a></li>
<li><a href="#"><span>그룹</span></a></li>
<li><a href="#"><span>커뮤니티</span></a></li>
<li><a href="#"><span>도움말</span></a></li>
</ul>
</body>
</html>
[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]
그 중에서 중복되는 것으로 간주되지 않도록 다음 두 문장을 설명해야 합니다.
#navigation li a{overflow:hidden;} /* IE5.5 및 6에서 삭제된 3px를 숨깁니다. 3px 버그가 아닙니다! IE5.5 및 6에서는 height:30px;line-height:33px; 높이가 33px입니다. */
#navigation li aspan{cursor:hand;}/* IE 5.5, 6, 7에서 마우스가 범위에 배치될 때 손 모양이 표시되지 않는 버그를 처리합니다. 또한 IE5.5는 커서:포인터를 지원하지 않지만 모든 IE 버전에서는 커서:손;*/을 인식합니다.
끝났습니다. 단점은 조건부 주석을 작성하는 것이 xhtml 근심증이 있는 사람들의 눈에 모래와 같다는 것입니다. 이를 제거하고 싶다면 해킹을 사용해도 아무런 해가 없습니다! 헤헤!
safari4, chrome, Opera10, ie5.5, 5, 6, 7, ff3에서는 문제가 발견되지 않았습니다.