新手求救，，DIV+CSS导航条制作！_html/css_WEB-ITnose
大家好，小弟再做一个导航条，遇到如下问题
目标网站的网页导航是这样的：
我用DIV+CSS 布局过后，样式是这样的，从下图可以看出导航的文字间距明显比目标网站的大很多。
如果把width调小一点却又放不下，如图
下面是HTML部分
<div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li>home</li> <li>SPECIALS</li> <li>ALL PRODUCTS</li> <li>CONTACT US</li> <li>ABOUT</li> <li>BACK TO TUTORIAL</li> </ul> </div> <div></div> <div></div> </div> </div></body>
下面是CSS部分
body{ background:url(../images/body-bg.jpg) fixed}.maindiv{ width:1000px; height:1200px; margin:0 auto}.head{ width:1000px; height:210px; margin:25px auto 0px} .menu{ width:1000px; height:30px; background:#060; color:#FFF; text-align:left} .menu ul { width:1000px; height:30px;} .menu ul li{font-size:11px; line-height:35px; text-transform:uppercase; text-align:left; width:100px; font-weight:bolder; float:left; list-style:none;}请问如何才能实现导航条像目标网站那样 ，请高手指点，非常感谢！！！！
回复讨论(解决方案)
.maindiv { width: 1000px; height: 1200px; margin: 0 auto } .head { width: 1000px; height: 210px; margin: 25px auto 0px } .menu { width: 1000px; height: 30px; background: #060; color: #FFF; text-align: left } .menu ul { width: 1000px; /*height: 30px;*/ padding-left:0; overflow:hidden; } .menu ul li { font-size: 11px; line-height: 30px; text-transform: uppercase; text-align: left; /*width: 100px;*/ font-weight: bolder; float: left; list-style: none; } .menu ul li a{ text-decoration:none; color:#ffffff; padding: 10px 15px; } .homeSpecail{ padding-left:0; background-color:#333333; }<body> <div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li class="homeSpecail"> <a href="#">home</a> </li> <li> <a href="#">SPECIALS</a> </li> <li> <a href="#">ALL PRODUCTS</a> </li> <li> <a href="#">CONTACT US</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">BACK TO TUTORIAL</a> </li> </ul> </div> <div></div> <div></div> </div> </div> </body>
这里的导航中的“选项”一般都是链接，所以你可以在html中将导航“选项”用a标签包起来，然后通过a标签的padding来控制“选项”之间的间距。
我也是菜鸟，共同探讨学习吧，呵呵。
从目标图片你应该可以看出
菜单的宽度不等
菜单的间距相同
那么证明 宽度是auto让内容来撑
间距？padding 和 margin都可以设置 但是padding是不会重合的 margin是会重叠的
从上图看出应该是采用padding 因为左面的间距比里面的间距小貌似是一半的样子
.maindiv { width: 1000px; height: 1200px; margin: 0 auto } .head { width: 1000px; height: 210px; margin: 25px auto 0px } .menu { width: 1000px; height: 30px; background: #060; color: #FFF; text-align: left } .menu ul { width: 1000px; /*height: 30px;*/ padding-left:0; overflow:hidden; } .menu ul li { font-size: 11px; line-height: 30px; text-transform: uppercase; text-align: left; /*width: 100px;*/ font-weight: bolder; float: left; list-style: none; } .menu ul li a{ text-decoration:none; color:#ffffff; padding: 10px 15px; } .homeSpecail{ padding-left:0; background-color:#333333; }<body> <div class="maindiv"> <div class="head"> <div class="menu"> <ul> <li class="homeSpecail"> <a href="#">home</a> </li> <li> <a href="#">SPECIALS</a> </li> <li> <a href="#">ALL PRODUCTS</a> </li> <li> <a href="#">CONTACT US</a> </li> <li> <a href="#">ABOUT</a> </li> <li> <a href="#">BACK TO TUTORIAL</a> </li> </ul> </div> <div></div> <div></div> </div> </div> </body>
这里的导航中的“选项”一般都是链接，所以你可以在html中将导航“选项”用a标签包起来，然后通过a标签的padding来控制“选项”之间的间距。
我也是菜鸟，共同探讨学习吧，呵呵。
非常感谢楼上的大哥，问题已经解决，非常感谢
额，不谢不谢...
letter-spacing
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7621
15
1389
52
89
11
70
19
31
136
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
