Created
March 8, 2013 06:43
-
-
Save coolicer/5114647 to your computer and use it in GitHub Desktop.
inline-block 空隙测试
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="gbk"> | |
| <title>inline-block 空隙测试</title> | |
| <style type="text/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:12px; | |
| } | |
| .dib { | |
| display: inline-block; | |
| *display:inline; | |
| *zoom:1; | |
| } | |
| .dib-wrap { | |
| font-size:0;/* 所有浏览器 */ | |
| letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */ | |
| *letter-spacing:normal; | |
| word-spacing:-1px;/* IE6、7 */ | |
| } | |
| .dib-wrap .dib{ | |
| font-size: 12px; | |
| letter-spacing: normal; | |
| word-spacing: normal; | |
| vertical-align: top; | |
| } | |
| a{ text-decoration: none; } | |
| a:hover{ text-decoration:underline;} | |
| .list { margin: 10px 0; white-space:nowrap; word-wrap:normal; } | |
| .list li a, .list a{ | |
| border: 1px solid blue; | |
| padding: 10px 20px; | |
| font-size:12px; | |
| } | |
| .list li a{ display:block;} | |
| .list .border a, .list .border{ border-color: #F63; } | |
| .fl{ float:left;} | |
| .fr{float:right;} | |
| .fl, .fr { *display:inline;} | |
| /* 闭合浮动 */ | |
| .clearfix:after { | |
| visibility: hidden; | |
| display: block; | |
| content: "."; | |
| clear: both; | |
| height: 0; | |
| line-height:0; | |
| } | |
| .clearfix { *zoom:1;}/* for IE6 IE7 */ | |
| 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;} | |
| ul li, div.list a{ margin-right:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main clearfix"> | |
| <h1><a href="http://www.iyunlu.com/view/css-xhtml/64.html" title="点击返回文章">返回文章：《inline-block 前世今生》</a></h1> | |
| <!-- 修复前 --> | |
| <div class="content fl"> | |
| <div class="wrap"> | |
| <h2>修复前：</h2> | |
| <h3>block 元素 display:inline-block</h3> | |
| <ul class="list"> | |
| <li class="dib border"><a href="#">li 标签</a></li> | |
| <li class="dib"><a href="#" style="color:red;">发现2：</a></li> | |
| <li class="dib border"><a href="#">发现1</a></li> | |
| <li class="dib"><a href="#">发现Xx2</a></li> | |
| <li class="dib border"><a href="#">发现3</a></li> | |
| </ul> | |
| <h3>inline 元素 display:inline-block</h3> | |
| <div class="list"> | |
| <a href="#" class="dib">a 标签:</a> | |
| <a href="#" class="dib border">发现2：</a> | |
| <a href="#" class="dib">发现1</a> | |
| </div> | |
| </div> | |
| <div class="wrap"> | |
| <h3>block 元素 浮动</h3> | |
| <ul class="clearfix list"> | |
| <li class="fl border"><a href="#">li 标签</a></li> | |
| <li class="fl"><a href="#">发现2：</a></li> | |
| <li class="fl border"><a href="#">发现1</a></li> | |
| <li class="fl"><a href="#">发现Xx2</a></li> | |
| <li class="fl border"><a href="#">发现3</a></li> | |
| </ul> | |
| <h3>inline 元素 浮动</h3> | |
| <div class="clearfix list"> | |
| <a href="#" class="fl">a 标签:</a> | |
| <a href="#" class="fl border">发现2：</a> | |
| <a href="#" class="fl">发现1</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 修复后 --> | |
| <div class="content fr"> | |
| <div class="wrap"> | |
| <h2>修复后：</h2> | |
| <h3>block 元素 display:inline-block</h3> | |
| <ul class="dib-wrap list"> | |
| <li class="dib border"><a href="#">li 标签</a></li> | |
| <li class="dib"><a href="#" style="color:red;">发现2：</a></li> | |
| <li class="dib border"><a href="#">发现1</a></li> | |
| <li class="dib"><a href="#">发现Xx2</a></li> | |
| <li class="dib border"><a href="#">发现3</a></li> | |
| </ul> | |
| <h3>inline 元素 display:inline-block</h3> | |
| <div class="dib-wrap list"> | |
| <a href="#" class="dib">a 标签:</a> | |
| <a href="#" class="dib border">发现2：</a> | |
| <a href="#" class="dib">发现1</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment