css inline-block问题

Question

正在了解display的inline-block属性，看了一个网站，就调了一下。发现有个问题不明白。

上图中header部分有三个a标签
第一个display:inline-block
第二个display:block
第三个使用了绝对定位position: absolute;right: 0;

然后我将第二个a的display设置为inline-block，然后第一个a与第二个a就重叠了。
想问的是
1.原本第二个a设置了display:block为啥没有换行？
2.第二个a设置为inline-block他为啥又重叠了？

Answer 1

重点在你没贴出的第一个 a 元素，明明是绝对定位啊。

Answer 2

第一个楼上已经回答
第二个问题是因为你没有给 inline-block 的 a元素设置宽高，所以它的默认大小就是里面内容的大小。但是如果是 block 的话默认是占有一整行的，所以可以使用 text-align:center; 之后就居中啦。