display:inline-block 的应用

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-02 17:01:35　-　阅:　-　评:3　-　积分:0

如上图所示，面对此效果你会用什么代码实现？实不相瞒，此图为我第一份单子中的一部分内容，当时看到此效果，我便想到了用2种方法来做。方法一：定义3个不同宽度的样式来加以控制，后来一想其它页面可能还会有此布局，如果字数发生变化时，这或多或少会有些偏差。于是我便毅然采取了第二种方法，即：使用display:inline-block。在前面提到过块对象和内联对象，这里的inline-block属性会将对象呈递内联对象。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="艺灵设计, yilingsj@gmail.com, www.yilingsj.com" />
<title>display:inline-block的应用</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;font-family:Arial; width:100%;}
a{text-decoration:none;font-size:12px;font-family:Arial;color:#0569ae}
a:hover{ text-decoration:none;}
.tab{width:400px;}
.tab a{display:inline-block;padding:0 15px; height:32px; line-height:32px;
border:1px solid #d8d8d8; border-width:1px 1px 0 1px; background:#eaeaea;margin-right:5px;}
.tab a:hover,.tab a.hover{background:url(/d/file/div/2013-08-02/pic_butbg.jpg) repeat-x;color:#fff;}
.tabnr{height:200px; border:1px solid #d8d8d8;width:400px;}
</style>
</head>
<body>
<div class="tab">
<a href="#" class="hover">Indoor</a>
<a href="#">Outdoor Optical Fiber Cable</a>
<a href="#">Submarine Cable</a>
</div>
<div class="tabnr">内容略去几百字......</div>
</body>
</html>

效果图如下：
inline-block
我们可以从代码中看到，我使用了行高来控制字体在垂直方向上居中，用padding来控制左右文本与边框的间距,用margin来控制选项卡标签间的距离(即留白),用1px背景在x轴方向上进行平铺，设置一个样式给Indoor做滑过时显示的效果

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-02/63.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！