好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

去除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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘