<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="zh-CN" /> <title>测试</title> <style type="text/css"> .item_content { float: right; background-color:red; width:50%; font-size: 0px; } .item{ background-color:pink; } .item2{ background-color:#888; } .item3{ background-color: #ff9; } .item_icon{ float: left; } </style> </head> <body> <div> <div class="item_content"> <span class="item">北京春季招建筑工人月均工资9621元 秒杀白领</span> <span class="item2">...</span> <span class="item3">nnn ...</span> </div> </div> </body> </html>
运行上述代码会得到如下结果：
出现了不该有的空隙，这是什么原因导致的呢？
原因：这是行内元素之间的tab制表符产生的，换行符也会产生这样的间隙，而字符的大小是定义字体大小来控制的，所以可以通过设置父元素字体大小font-size:0，并指定子元素字体大小来达到清除间隙的目的，针对IE6/7存在的1px间隙，可用*word-spacing:-1px;来清除。
将CSS代码修改一下即可：
<style type="text/css"> .item_content { float: right; background-color:red; width:50%; font-size: 0px; } .item{ background-color:pink; font-size: 14px; } .item2{ background-color:#888; font-size: 14px; } .item3{ background-color: #ff9; font-size: 14px; } .item_icon{ float: left; } </style>
