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

php中文网

发布时间：2016-06-24 12:25:36

2031人浏览过

来源于php中文网

原创

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

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

我用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