inline-block

HTML

<div class="main clearfix">

        <h1><a href="http://www.iyunlu.com/view/css-xhtml/64.html" title="点击返回文章">返回文章：《inline-block 前世今生》</a></h1>

<!-- 修复前 -->
<div class="content">
        <div class="wrap">
        <h2>请用 IE6、7 查看此 demo</h3>
            <h3>block 元素 display:inline-block</h3>
            <ul class="list">
                <li class="dib-block"><a href="#">li 标签</a></li>
                <li class="dib-block"><a href="#" style="color:red;">发现2：</a></li>
                <li class="dib-block"><a href="#">发现1</a></li>
                <li class="dib-block"><a href="#">发现Xx2</a></li>
                <li class="dib-block"><a href="#">发现3</a></li>
            </ul>
            
            <h3>inline 元素 display:inline-block</h3>
            <div class="list">
                <a href="#" class="dib-inline">a 标签:</a>
                <a href="#" class="dib-inline">发现2：</a>
                <a href="#" class="dib-inline">发现1</a>
                <span  class="dib-inline">span 标签</span>
            </div>
        </div>    
            
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}

body { font: 12px/1.5 tahoma, sans-serif; }

ul,
ol { list-style: none outside none; }

a {
    text-decoration: none;
    color: #555;
}

a:focus{ outline:thin dotted #555; outline: 5px auto -webkit-focus-ring-color; outline-offset:-2px;}

.main{
    margin: 25px auto;
    width: 990px;
}

.wrap {
    border-bottom:1px solid #DDD;
    padding-bottom:20px;
    font-size:0;
}

.dib-inline, .dib-block {
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
}

.dib-inline {
    display:inline-block;
}

.dib-block {
    display:inline;
    zoom:1;
}

.list { margin: 10px 0; white-space:nowrap; word-wrap:normal; }

.list li a, .list a, .list span{
    border: 1px solid #999;
    font-size:12px;
    background-color:#FCC;
}
.list li a{ display:block;}/*  增加 a 标签响应面积*/

.fl{ float:left;}
.fr{float:right;}
.fl, .fr { *display:inline;}

h1{ font-size:22px; color:#333; text-align:center;}
h2{ font-size:18px; color:#555; margin:15px 0 0;}
h3{ font-size:14px; color:#666; font-weight:normal; margin:15px 0 0 10px;}