新手求救，，DIV+CSS导航条制作！_html/css_WEB-ITnose

大家好，小弟再做一个导航条，遇到如下问题

目标网站的网页导航是这样的：



我用DIV+CSS 布局过后，样式是这样的，从下图可以看出导航的文字间距明显比目标网站的大很多。




如果把width调小一点却又放不下，如图



下面是HTML部分

    
    	
                
                  	
                    	
home
                        
SPECIALS
                        
ALL PRODUCTS
                        
CONTACT US
                        
ABOUT
                        
BACK TO TUTORIAL
                    
                
            
            
        
    
  

下面是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;			}

    		
			
				
					
						
							home						
						
							SPECIALS						
						
							ALL PRODUCTS						
						
							CONTACT US						
						
							ABOUT						
						
							BACK TO TUTORIAL						
					
				
				
				
			
		
	

这里的导航中的“选项”一般都是链接，所以你可以在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;			}

    		
			
				
					
						
							home						
						
							SPECIALS						
						
							ALL PRODUCTS						
						
							CONTACT US						
						
							ABOUT						
						
							BACK TO TUTORIAL						
					
				
				
				
			
		
	

这里的导航中的“选项”一般都是链接，所以你可以在html中将导航“选项”用a标签包起来，然后通过a标签的padding来控制“选项”之间的间距。
我也是菜鸟，共同探讨学习吧，呵呵。


非常感谢楼上的大哥，问题已经解决，非常感谢

额，不谢不谢...

letter-spacing