Question

css，如何处理行级标签之间的空格，每次对某些用display:inline-block

例如a{display:inline-block;width:27px;height:27px;text-align:center}
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
这里换行符或者空格会占掉几px，不同浏览器不用情况，如何去掉这种占位符？

Answer 1

第一种办法：你改这么写（最简单的一种）：<a>1</a><a>2</a><a>3</a><a>4</a>,就是A标签之间不换行不加空格
第二种办法：如果你非要换行这种写法：
这么改（这种写法，在ie6中还是稍微有点间隙，但是在别浏览器中都正常）：
a{display:inline-block;width:27px;height:27px;text-align:center}
.nav{font-size:0}
.nav a{font-size:12px}
<div class="nav">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<div>

Answer 2

给外层的div设置font-size:0px;然后给a标签设置正常的字体大小，就可以解决了。

<div style="font-size:0px;">
<a style="display:inline-block;*display:inline;zoom:1;font-size:12px;">A标签</a>
 <a style="display:inline-block;*display:inline;zoom:1;font-size:12px;">A标签</a>
</div>

PS：IE6是不认识display:inline-block;这个的，这里加个hack就可以解决了。

Answer 3

float:left
绝对可以去掉，不过需要清除浮动

追问

除了浮动还有其他方法吗？

追答

想其他人那样说的，代码不要换行

没有其他了

Answer 4

Vue实践-CSS样式position/display/float属性对比使用

Answer 5

再加overflow:hidden;