어제 UCWeb을 사용하여 Goos가 게시 한 것을 보았습니다. Float 메뉴는 수평으로 중앙에있을 수 없다고 말했습니다. 그리고 약간의 해킹.
여기에 더 쉬운 방법이 있습니다. 먼저 표시하십시오.
실제로, 나는 외부에 또 다른 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">
바디 {font-family : Verdana, Arial, Sans-serif; font-size : 12px; 마진 : 120px Auto; Text-Align : Center;}
ul {마진 : 0; 패딩 : 0; 목록 스타일 : 없음;}
#Navigation {디스플레이 : 인라인-블록; 테두리 : Solid 1px 빨간색; 패딩 : 20px;}
#Navigation li {높이 : 30px; float : 왼쪽;}
#Navigation li a {float : 왼쪽; 높이 : 30px; 선-높이 : 30px; 패딩 : 0 23px; 배경 :#97c099;}
#Navigation Li A : 호버 {배경 :#59c099; 색상 : #ffff;}
</스타일>
<!-[LTE IE 7]> <스타일 유형 = "text/css">#navigation {display : inline;} </style> <! [endif]->
<title> 한 메서드의 플로트 메뉴 룸 </title>
</head>
<body>
<ul id = "Navigation">
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> News </a> </li>
<li> <a href = "#"> 상점 </a> </li>
<li> <a href = "#"> Group </a> </li>
<li> <a href = "#"> 커뮤니티 </a> </li>
<li> <a href = "#"> 도움말 </a> </li>
</ul>
</body>
</html>
[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정 한 다음 실행을 누릅니다]
가장 중요한 것은이 문장입니다.
<!-[LTE IE 7]> <스타일 유형 = "text/css">#navigation {display : inline;} </style> <! [endif]->
IE의 하위 버전을 관리하기 위해 여기서는 조건부 주석이 사용됩니다.
위의 코드에서 슬라이딩 도어 탐색이 발전했습니다.
코드 박스를 실행하십시오
<! 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">
바디 {font-family : Verdana, Arial, Sans-serif; font-size : 12px; 마진 : 120px Auto; Text-Align : Center;}
ul {마진 : 0; 패딩 : 0; 목록 스타일 : 없음;}
#Navigation {디스플레이 : 인라인-블록; 패딩 : 20px; 테두리 : Solid 1px Red;}
#Navigation li {높이 : 30px; float : 왼쪽;}
#Navigation li a {float : 왼쪽; 배경 :#97c099 URL (<a href = ") 왼쪽 상단 No-Repeat; Padding-left : 27px; 높이 : 30px; 오버플로 : 숨겨진;}
#Navigation Li a Span {높이 : 30px; float : 왼쪽; 배경 : url (<a href = ") 오른쪽 -352px no-Repeat; 패딩-오른쪽 : 27px; 선-하이이트 : 33px; hand;}
#Navigation Li A : 호버,#Navigation Li.Current a {배경 위치 : 왼쪽 -176px; 색상 :#009; 배경색 :#8597B5;}
#Navigation Li A : 호버 스팬,#Navigation Li.Current A Span {배경 위치 : 오른쪽 -528px;}
#Navigation li.current a {font-weight : bold;}
</스타일>
<!-[LTE IE 7]> <스타일 유형 = "text/css">#navigation {display : inline;} </style> <! [endif]->
<title> 위의 코드에 따라 슬라이딩 도어 스타일로 업데이트 </title>
</head>
<body>
<ul id = "Navigation">
<li> <a href = "#"> <span> home </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 {오버 플로우 : 숨겨진;} /* ie 5.5와 6의 추가 3px를 숨기십시오. 3px 버그가 아닙니다! 높이 : 30px; 라인 높이 : IE5.5 및 6에서 높이는 33px입니다. */
#Navigation Li a Span {Cursor : Hand;}/* 스팬의 마우스가 손 모양처럼 보이지 않는 버그를 관리하십시오. 또한 IE5.5는 커서를 지원하지 않지만 모든 버전은 Cursor를 알고 있습니다.*/
완료 후, 단점은 조건부 의견을 작성하는 것이 XHTML 이환율을 가진 사람들을위한 모래와 같습니다. 헤헤!
Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3에서는 문제가 발견되지 않았습니다.