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 ，至此，刚才的问题就修复了。
一个小小的问题折腾了这么久，都是因为自身基础不扎实照成的，哎，还是需要多看书啊，嗯，继续努力，加油！
