消除a标签连接之间间距缝隙的方法

自己写的几个a标签,它们之间并没有设置样式,但是显示 的效果确实a标签之间有缝隙、有间距,无论我们怎么调都不能解决。

    很多网站编程人员都有可能遇到过这样的问题,就是自己写的几个a标签,它们之间并没有设置样式,但是显示的效果确实a标签之间有缝隙、有间距,无论我们怎么调都不能解决。
    出现这种情况的原因是很多编程人员为了代码结构整齐,看起来有层次感以及方便以后修改查看,人为的让几个a标签之间换行,换行就产生了一堆的空间,在浏览器里就显示有间隙了。遇到这种情况,一般有下面几种解决办法:

  第一种解决办法:

   改变超链接书写方式比如我们原来书写的代码是这样:

<a href="##">首页<a/>
<a href="##">段子<a/>
<a href="##">图片<a/>

 


     我们把它改成这个样子:

     <a href="##">首页<a/><a href="##">段子<a/><a href="##">图片<a/>
     标签中间不要换行,a标签一个挨着一个书写,直到它们自动换行,这样问题就解决了。

 

    第二种解决办法:给外层div加属性限制
   另一个解决办法就是给a标签外层div设置margin-left:-8px即可解决,-8不是个特定值,具体多大根据每个人的情况来定,这样设置的好处就是即使负值设置的足够大,a标签之间也不会发生重叠,这是非常好的,这个负值可以稍微大点。

 

  第三种解决办法:给外层div设置字符间距和单词间距

    假设a标签外层div的ID是nav,就可以通过使用下面两种css中的一种,或两种同时使用来解决这一问题。
    设置字符间距的css样式,为负值哦
    
#nav{
    letter-spacing:-3px;
}
#nav a{
    letter-spacing:0;
}
   // 设置单词间距的css样式,为负值哦
#nav{
    word-spacing:-6px;
}
#nav a{
    word-spacing:0;
}
    以上三种解决方法是大家常用到的,大家可以参考一下解决自己的问题,如果有更好的解决办法大家可以留言一起讨论。
posted @ 2017-06-22 11:19  百撕可乐  阅读(2272)  评论(0编辑  收藏  举报
版权声明:本博客原创文章使用CC3.0授权协议,署名-非商业性使用-禁止演绎。转载本博客文章须在开头位置著名原作者姓名以及原文链接,违反协议的转载将受到我本人的版权追责。