Question

CSS中并列的display:inline-block的<a>元素如果内容为空就错位的问题

.nav{height:20px; overflow:hidden;}
.nav a{display:inline-block;}
.arr{background:xxxx;}
<nav class="nav">
<a href="#">123</a>
<a href="#" class="arr"></a>
<a href="#">456</a>
</nav>
如果<a>标签中间没有内容，就会错位，如图：

如果加上内容，哪怕是个空格，就会正常：
<a href="#" class="arr"> </a>

请教高手，这是为什么？





Answer 1

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
没有文字的时候，加个空格就可以了。记住这一点就行了。

Answer 2

加空格字符是没有用的，必须要加

 

Answer 3

我来补充下上面那位最佳回答，加空格是有用的，不过不是直接敲space，而是家空格转义符“ ”，这样就不用再处理文字了。

Answer 4

1. overflow:hidden;

或者 

vertical-align:middle;