首页 > 代码库 > bug:inline-block间距bug的调整

bug:inline-block间距bug的调整

<div id="one">        <a href="">首页</a>        <a href="">首页</a>        <a href="">首页</a>        <a href="">首页</a>        <a href="">首页</a></div>
*{            margin:0;            padding:0;        }        div a{            display: inline-block;            text-align: center;            width:70px;            background-color: #A9A9A9;        }        #one a:link{            color:white;        }        a:hover{            background-color: red;            color:green;        }

 

方法一:使用word-spacing或者letter-spacing 

#one{            word-spacing: -10px;        }#one a{            word-spacing:0px;        }

方法二:使用margin的负值

#one a{            margin-rignt:-10px;        }

更多内容请看:

  http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

以及:

  http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/