<style>
div{width:400px;} a{width:200px;padding:0px;margin:0px;border:none;display:inline-block}
</style>
<div>
<a href='#'>one</a>
<a href='#'>two</a>
</div>
大家看个例子
简单的写一下
现在不知道为什么出现不了代码编辑器
只能写写文本了。
我们会看到这么写的话两个A是不能处于同一行的。
换一种style的写法
<style>
div{width:400px;} a{width:200px;padding:0px;margin:0px;border:none;display:block;float:left;}
</style>
这样能够在同一行
我搜索问题原因,在一篇英文文章里面说是因为inline元素都会跟inline元素之间产生一个类似white-space的空隙
可以验证,通过设置a的不同背景色,然后加大div的宽度 当他们正好到同一行的时候,确实看到两个A之间有个空隙。
虽然这种说法我也赞同
但是我发现其中有一些我现在都无法解释的问题,如果有人知道可以告诉我一下。
就是在chrome中文版里面这个空隙将近是8px
而在chrome英文版里面却只是4px
这一点让我感觉太诡异了
然而还有一种使用inline-block但是不会出现空隙的做法
就是将html代码写成这样
<div>
<a href='#'>one</a><a href='#'>two</a>
</div>
就是将两个A写在同一行,挨着写
难道说我们平时写的换行的写法就会引起一些浏览器的兼容问题?
还是说同一行的写法尽量使用float而不是inline-block?
这一点真的很希望有人能帮我详细解释一下,万分感谢