当前位置：首页 → 问答吧 → li左右之间的间隙，html对回车的解释变成空格？

li左右之间的间隙，html对回车的解释变成空格？

时间：2010-08-23

来源：互联网

刚发现一个问题，我在css使用display:inline-block来使 li 横向排列，但是发现如果 li 在html中有过行缩进，那么在各种浏览器（ie,ff,chrome ）中出现“两个li 之间有空格”的情况；改成div也是一样。如果在html中li之间没有过行，则不会出现空格。因为以前常用float，所以没有发觉。由于中文chrome的12px原因，设置font-size对其无用。如去除html过行缩进，编写和调试代码都及其不方便。不知道大家有没有遇到这种情况？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>list test</title> <style> ul { margin:0px; padding:0px; } ul li { width: 200px; height:200px; background:#888; display:inline-block; } .div1 div { width: 200px; height:200px; background:#888; display:inline-block; } </style> </head> <body> CSS代码完全一样<br /> 以下是html li代码过行的显示 <ul> <li >ddd</li> <li >ccc</li> <li >fff</li> </ul> 以下是没有过行的显示 <ul> <li >ddd</li><li >ccc</li><li >fff</li> </ul> 以下是div的过行显示 <div class="div1" > <div>dddd</div> <div>fffffff</div> <div>eeeeee</div> </div> 以下是div没过行 <div class="div1" > <div>dddd</div><div>fffffff</div><div>eeeeee</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 EthanChen 于 2010-8-23 18:11 编辑 ]

作者: EthanChen 发布时间: 2010-08-23

为什么不用float?
再谈float菜单居中

作者: yoom 发布时间: 2010-08-23

因为我想弄出这种效果，http://www.qianduan.net/cross-browser-inline-block.html

作者: EthanChen 发布时间: 2010-08-25

没人能解释吗？

作者: EthanChen 发布时间: 2010-09-02

那你就用那种方法做就是了

作者: webbise 发布时间: 2010-09-03

内联元素在html中换行的同时会产生一个文本节点，可以使用负值的margin-right或者letter-spacing + word-spacing来解决这个问题，不考虑chrome可使用font-size基本解决。
关于inline-block对象间的缝隙的分析：http://www.14px.com/?p=187

作者: 14px 发布时间: 2010-09-03

找到解决方法了！非常感谢！！

作者: EthanChen 发布时间: 2010-09-05