新手，DIV+CSS导航条制作

新手求救，，DIV+CSS导航条制作！
大家好，小弟再做一个导航条，遇到如下问题

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

新手，DIV+CSS导航条制作

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

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

下面是HTML部分

    &lt;div class="maindiv"&gt;
    &lt;div class="head"&gt;
                &lt;div class="menu"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;home&lt;/li&gt;
                        &lt;li&gt;SPECIALS&lt;/li&gt;
                        &lt;li&gt;ALL PRODUCTS&lt;/li&gt;
                        &lt;li&gt;CONTACT US&lt;/li&gt;
                        &lt;li&gt;ABOUT&lt;/li&gt;
                        &lt;li&gt;BACK TO TUTORIAL&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

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


    &lt;body&gt;
&lt;div class="maindiv"&gt;
&lt;div class="head"&gt;
&lt;div class="menu"&gt;
&lt;ul&gt;
&lt;li class="homeSpecail"&gt;
&lt;a href="#"&gt;home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;SPECIALS&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;ALL PRODUCTS&lt;/a&gt;
&lt;/li&gt; 
 
&lt;li&gt;
&lt;a href="#"&gt;CONTACT US&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;ABOUT&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;BACK TO TUTORIAL&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

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

新手DIV+CSS导航条制作

热点推荐