inline-block 实现横向居中带分隔线的导航

前日,需要实现这样一个导航效果:

横向居中且带有分隔线.这个实现方式有很多种,我使用 inline-block 来实现.我先介绍一下什么是 inline-block.

说到 inline-block 必然要说起 inline,与block,这些都是 css 布局属性 display 的取值(当然,display的值还有很多,这里就不一一列举了):

inline： 指定对象为内联元素。
block： 指定对象为块元素。
inline-block： 指定对象为内联块元素。（CSS2）

我写了一个小例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
* {margin: 0;padding: 0;}
body {font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;}
.wrap {margin: 0 auto;padding: 0;width: 980px;text-align: left;}
.header {margin: 10px 0;}
.nav {height: 40px;font-size: 0;text-align: center;background: #666;}
.nav li {display: inline-block;*display: inline;*zoom: 1;width: 80px;height: 40px;font-size: 14px;text-align: center;line-height: 40px;background: #ccc;}
.nav .line {overflow: hidden;width: 4px;background: #fff;}
.nav a {color: #f00;background: green;}
</style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <ul class="nav">
            <li><a href="#">网站首页</a></li>
            <li class="line"></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下:

大家会发现，为什么 li.line 会把两边的 li 挤下去了呢？line的样式很简单：overflow: hidden;width: 4px;background: #fff; 一个4px宽，40px高的间隔，用来存放链接之间的 分隔线，背景填充，但是为什么会这样呢？经过我多方测试，终于修复这个问题，代码很简单，就是为 inline-block 的 li 设置 vertical-align 属性，值取 top 。修复后效果如下：

这个问题困扰了我1个多小时，最终解决也是从 line-height 属性入手，然后我发现，为 <li class="line">abc 123</li> 当 line li 之间字符为半角字符时，被撑开的高度会比较大，当字符为全角字符时，配合 text-indent 负值，可以修复上面的问题，但是在IE系列浏览器下边线不够完美，还是会有间隙，后面我试着为 line li 设置 vertical-align 属性，居然修复了。仔细想想好像也是这个道理：

我们把li块级元素指定为内联块元素，也就是说li是块级，但是也具有内联的特性，内联元素的 vertical-align 属性默认值为 baseline ，但是我们的 li 在垂直方向上不希望以 baseline 方式呈现，所以我们设置为 top ，至此，刚才的问题就修复了。

一个小小的问题折腾了这么久，都是因为自身基础不扎实照成的，哎，还是需要多看书啊，嗯，继续努力，加油！

posted @ 2012-11-20 16:12  小鱼儿-lovefishs  阅读(342)  评论(2)  编辑  收藏  举报