CSS内联元素勿随意换行

在写HTML代码的时候，很多人喜欢用换行来使代码排列整齐。

比如：

<div>

  <a>超链接</a>

  <a>超链接</a>

  <a>超链接</a>

</div>

 

这样写确实会提高代码的阅读性，但是要注意：如果是内联元素，你用回车换行，会被浏览器认为这是一个空格。会产生一个空格的宽度。

在某些时候，对于精确定位是有影响的。

例如：

<div>  
    <span>A</span>  
    <span>A</span>  
    <span>A</span>  
</div> 

显示的时候应该是：AAA

但实际上在页面上会显示为：A A A

浏览器在后面两个A的前面都加了一个空格。

 

 

要解决这样的问题，最好是不要换行来写html代码，而是将它们写成一行：

<div>

  <span>A</span><span>A</span><span>A</span>

</div>

当然也可以使用浮动来解决：

<sytle>span { float:left;}</style>

<div>

  <span>A</span><span>A</span><span>A</span>

</div>