去除inline-block之间的空白
inline-block之间出现空白其实是inline-block之间的换行转化出来的。
去除空白三种实用的方法:
压缩HTML
压缩HTML则不会有换行的问题,因此不会出现空白。
奇葩格式去除换行
<!doctype html> <html> <head> <meta charset='utf-8'> <title>去除inline-block换行空白</title> <style> .inlineBlock a { display:inline-block; } </style> </head> <body> <div class="inlineBlock"> <a href='#'>test1 </a><a href='#'>test2 </a><a href='#'>test3</a> </div> </body> </html>
父元素font-size:0
<!doctype html> <html> <head> <meta charset='utf-8'> <title>去除inline-block换行空白</title> <style> .inlineBlock { font-size:0 } .inlineBlock a { display:inline-block; font-size:14px } </style> </head> <body> <div class="inlineBlock"> <a href='#'>test1</a> <a href='#'>test2</a> <a href='#'>test3</a> </div> </body> </html>
分享漂亮的导航
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>CSS制作立体导航</title> <style> body{ background: #ebebeb; } .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; background: #f65f57; border-radius:5px; box-shadow:0 5px #b23333; } .nav a{ display: inline-block; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .nav a:hover{ -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); } .nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; } .nav li{ background:linear-gradient(to bottom,#f65f57,#a82724,#f65f57) no-repeat left/1px 18px; } .nav li:first-child { background:none; } .nav a, .nav a:hover{ color:#fff; text-decoration: none; } </style> </head> <body> <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">About Me</a></li> <li><a href="">News</a></li> <li><a href="">Blog</a></li> <li><a href="">Resources</a></li> <li><a href="">Contact Me</a></li> </ul> </body> </html>
点赞0
支持一下