CSS导航技术--间隔平分栏目,防止li换行

 

注意了这里的技术可能并不适用所有的CSS导航。这是关于如何分隔或者平分导航中每个栏目的技术。这种技法是我在设计CSS导航中想出来的一个CSS技法，它在我的CSS导航设计中也是经常使用的一种。如果要增加导航的栏目，也只需要更改一个数值，不需要修改太多的CSS，甚至重做图片，但可能有某些方面的缺点。在使用前不妨先考虑下是否有更好的解决方案。

这里先假设例子的所有的导航都使用以下的html结构，这是目前地球上最简洁的导航了。

CODE:
<div class="nav">
<ul>
<li><a href="#">home page</a></li>
<li><a href="#">new products</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">my account</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>   
原理:
1，给外层的div一个和其他内容相同的宽度来达到对齐的效果，overflow:hidden来隐藏超出的部分和清理浮动。
2，因为很多情况下li都是float的，这里需要给div.nav ul足够的宽度来防止li换行。
3，给每个li定义的个图片或border，然后需要隐藏第一的li的图片或border。用负值的margin来实现。
4，a必须display:block;把主要的修饰放在a上实现。

1，分隔导航中每个栏目
使用图片或者定义border把栏目分开。
这种情况只是这种技法的初级应用。代码很简单不需要太多解释。

CODE:
/*实现下面的导航效果，代码是从之前作某个具体的案例中抽取出来的*/
.nav {
    background: #eeff00;
    height: 3em;
    line-height: 3em;
/*居中。width的定义是必须的*/
    width: 732px;
    margin: auto;
/*Clear Float同时隐藏不需要的部分，达到与其他内容对齐 */
    overflow: hidden;
}
.nav ul {
/*这是关键，提供较大的宽，避免li出现换行*/
    width: 1000px;
}
.nav li {
    float: left;
/*因为需要定义margin-left，要避免IE6以下的双倍margin*/
    display: inline;
/*这是隐藏第一个li的图片或者border-left的关键，这里10px是图片的宽。当然用first-child同样可以取消图片或者border，但是IE6下不支持这种

方式*/
    margin-left: -10px;
/*给padding-left足够的空间放置图片或者是border-left，如果栏目（li）增加，则减小padding的值。这里每个li的宽度是不一样的，如果要使每

个li的宽度是不一样的，可以定义width值和text-align:center.这时可以不需要定义padding*/
    padding: 0 50px;
    background: url(images/t_bullet1.gif) no-repeat left center;
}
.nav a {
    display: block;
    float: left;
    text-transform: uppercase;
/*IE6在显示字号110%有点问题*/
    font-size: 110%;
    -font-size: 14px;
}
2，分隔导航中每个栏目，并且每个栏目有间隔
算上彼此的间隔之后，准确的平分每个li是不可能的，我们只能在视觉上创造出平分，1-2px的误差在只有在彼此相邻的对比下才会发现。
现在来实现上面的效果。以下是CSS，html还是保持不变的。

CODE:
/*这个例子比较特殊，我并没有为每个li定义margin来实现彼此的间隔，代码还是大同小异的。
.nav定义了一个渐变的黑色背景，width使他和上下的内容已经对齐，事先在他的上一级我已经居中了，如果需要居中则加入margin:auto;
.nav是960px，目前有5li，如果没有彼此的间隔正好平分，这种情况要非常幸运才碰得上。
现在彼此的间隔是2px,我的数学不好，这个不知道怎么算。但至少知道这是不能平分。
有强人竟然给px小数的数值！我从不会那么勤奋到给每个li定义Width的。
*/
.nav {
    width: 960px;
    height: 40px;
    margin-bottom: 2px;
    overflow: hidden;
    background: #000 url(images/t_navBg.gif) repeat-x;
}
/*可以注掉这个，再调整.nav li 的width，这会出现一点点数值就会让li换行，这是必须的*/
.nav ul {
    width: 1000px;
}
.nav li {
    float: left;
    display: inline;
/*因为border-left是2px，所以不用讲了，地球人都知道*/
    margin-left: -2px;
/*190px不是量出来的，是个大概值，这个自己该写多少写多少，以后li增加了，li越多数值就改越小。*/
    width: 190px;
    height: 40px;
    line-height: 40px;
/*如果用margin-right实现间隔，这样我要把背景图t_navBg.gif放在li上，如果li太少则达不到下图的这样效果（width: 120px;）。
#F2F2ED正好是body背景的颜色，不是真正的间隔，是一种错觉。*/
    border-left: 2px solid #F2F2ED;
}
/*.nav li a的display: block;是必须的，其他如何定义那大家就各显神通了*/
.nav li a {
    display: block;
    color: #fff;
    padding-left: 20px;
    text-decoration: none;
    outline: none;
    text-transform: capitalize;
    background: url(images/t_bullet_yellow.gif) no-repeat 10px 50%;
}
3，平分导航中每个栏目，彼此有间隔
看到这种效果，绝对会有想放弃以CSS实现的念头，这用表格太简单了。这是事实。但一旦栏目的数量改变，又要重新作。
要想个一劳永逸的方法。或许要要加hover的效果。
IE6不支持A以外元素的hover伪类，注意是“不支持A以外元素的”，也就是说“以内的”就可以了。
这样只好改一下原来的html了，在a以内加span。

CODE:
<div class="nav">
<ul>
<li><a href="#"><span>home page</span></a></li>
<li><a href="#"><span>new products</span></a></li>
<li><a href="#"><span>specials</a></span></li>
<li><a href="#"><span>my account</span></a></li>
<li><a href="#"><span>contact us</span></a></li>
</ul>
</div>   
看看CSS吧

CODE:
/*假设.nav已经居中，需要居中则加入margin:auto; */
.nav {
    height: 43px;
    line-height: 43px;
    margin-bottom: 5px;
    width: 900px;
    overflow: hidden;
}
.nav ul {
    width: 1000px;
}
.nav li {
    float: left;
/*display: inline;这里可以不要了*/
    margin-right: 3px;
}
.nav a {
/*display: block;是必须的*/
    display: block;
    text-transform: uppercase;
    font-size: 120%;
    text-align: center;
/*你需要慢慢调整widt的数值，来达到最佳效果。最后的li可能要被隐藏1-2px，不仔细看的话是不易被发现*/
    width: 178px;   
    background: #FD1B77 url(images/navBgL.gif) no-repeat 0 0;
}
.nav a span {
/*display: block;是必须的*/
    display: block;
    background: url(images/navBgR.gif) no-repeat 100% 0;
}
/*加入hover效果*/
.nav a:hover {
    background-position: 0 100%;
}
.nav a:hover span {
    background-position: 100% 100%;
}