자동 중앙 정렬 탐색 모음 및 관련 문제의 예 DIV+CSS_CSS/HTML

방금 만든 내비게이션 바입니다. LINK 4개를 중앙에 배치하기 위해 이렇게 만들었는데, 완성하고 보니 문제점이 많이 발견되어 적어서 여러분과 공유하겠습니다!

우선 네비게이션 바부터 살펴보시죠!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>자슈 테스트</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn" target="_blank">홈페이지</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">정보 공개</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">내 고객 컬렉션</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">도움말</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a> 2006-09-11 이른 아침</p>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

질문:
1. FIREFOX에 스페이스 버그가 나타나는 이유를 모르겠습니다. LI 포인트가 같은 줄에 쓰여 있지 않으면 문제가 발생합니다. 위의 코드를 실행해보세요!

2. IE와 FIREFOX의 작은 차이(아래 그림 참조). 이 작은 차이를 눈치 채지 못했다면 CSS에 padding: 6px 15px 5px 15px를 쓰지 않았을 것입니다. 하세요. 가운데 세로선을 윗선과 아랫선에 연결해주세요! (IE6과 IE7 사이에는 더 작은 차이가 있습니다.)


3. #nav li a{margin:1px;} 줄은 쓸모가 없나요? 그렇게 생각된다면 삭제하고 시도해보세요. 작동하는지 확인해보세요!

4. 특정 시간으로 확대되면 페이지가 줄바꿈됩니다. FIREFOX에서는 min-width를 사용하여 문제를 해결하지만 IE에서는 min-width를 인식하지 못하므로 다음과 같은 식((documentElement)만 사용할 수 있습니다. .clientWidt..... 해결 방법은 위 코드에 추가하지 않았습니다. 줄을 바꾸지 않으려면 위의 #nav 줄을 다음과 같이 변경하세요.

프로그램 코드

코드 복사 코드는 다음과 같습니다.

#nav{height:24px; 솔리드 #D28A05; 테두리 상단: 1px 솔리드 #D28A05;배경 이미지: url(nav_bg.jpg);배경 색상: #FF9900; 텍스트 정렬:센터;최소 너비:400px;폭: 표현식((documentElement. clientWidth < 400) ? "400px" : "auto" );}

기본적으로 이 분야에는 문제가 많기 때문에 직접 해보는 것이 좋습니다. 문제가 많이 발견됩니다!
또한 이 블로그는 FIREFOX에서 보기 흉할 것이므로 한 번 살펴보세요.
한 가지 더: 제가 작성한 내용에는 필연적으로 문제가 있을 것입니다. 아무튼 지적해주시면 정말 기뻐요