当前位置：首页 → 问答吧 → li标签中的元素如果float则会引起多余的像素，如何解决？

li标签中的元素如果float则会引起多余的像素，如何解决？

时间：2009-03-14

来源：互联网

- -! 不是一次碰到这样的问题了。

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:inline-block;} li { display:block; background:#f60;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: 14px 发布时间: 2009-03-14

给li加 float:left;

为什么我不知道，但每次我都这么解决的~

作者: dlcc 发布时间: 2009-03-14

- -! 我也是...还有width:100%。
就是搞不清啥原因。

作者: 14px 发布时间: 2009-03-14

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:block; background:#f60;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

li { display:inline-block;} 去掉...

作者: musictea 发布时间: 2009-03-14

谢谢楼上大哥。
感觉我陷入一个“为什么”的深渊了...
天啦，li { display:inline-block;} li { display:block;}，我一直以为只会取display:block;这个值，前面写display啥都没关系...

作者: 14px 发布时间: 2009-03-14

display:inline-block;

这个东西为什么我都几乎没用过呢。-。-

作者: dlcc 发布时间: 2009-03-14

这个属性很重要，你往下面的帖子翻，有个加分的帖陈述了它的应用。
另外4楼的这个方法不行，display:inline-block;这里是用于清除ie下的浮动的，我现在在里面是一个左浮动一个右浮动，如果只有左浮动就会出现问题了。
目前的方法还只有2楼说的li {float:left;width:100%;}。

[ 本帖最后由 14px 于 2009-3-14 11:11 编辑 ]

作者: 14px 发布时间: 2009-03-14

看了那个帖子，原来是在内容不确定高度的情况下浮动的问题。。

我们公司网站的要求太高，所有的页面都要固定高度并对齐，不可以自适应高度，不管是什么地方。所以还真用不上这个。。。我也就没遇到过那种问题了。-。-汗~

作者: dlcc 发布时间: 2009-03-14

引用:

原帖由 14px 于 2009-3-14 11:10 发表
这个属性很重要，你往下面的帖子翻，有个加分的帖陈述了它的应用。
另外4楼的这个方法不行，display:inline-block;这里是用于清除ie下的浮动的，我现在在里面是一个左浮动一个右浮动，如果只有左浮动就会出现问题了 ...

我发现问题还是在于，如果 li 不浮动并且触发了 hasLayout，那么就会有空隙。所以用触发 hasLayout 来闭合浮动的方法在这里就会导致空隙。

引用:

感觉我陷入一个“为什么”的深渊了...
天啦，li { display:inline-block;} li { display:block;}，我一直以为只会取display:block;这个值，前面写display啥都没关系...

写这两句，li 的 display 值最终确实只会取 block，但是前面的 { display:inline-block;} 的作用就是触发 hasLayout，这个触发效果不会因为 display 值被覆盖为 block 而取消。这其实也就是这两句话的意义。

[ 本帖最后由 birdstudio 于 2009-3-14 14:00 编辑 ]

作者: birdstudio 发布时间: 2009-03-14

<!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=gb2312" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li {display:inline;zoom:1;background:#f60;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

IE下块元素如何实现 display:inline-block 的效果

div {display:inline-block;...}

div {display:inline;}

第二种

div {display:inline; zoom:1;...}

可以添加width属性来设置宽度...

我用第二种方法就没有出现你所说的问题...也能触发layout

[ 本帖最后由 musictea 于 2009-3-14 15:05 编辑 ]

作者: musictea 发布时间: 2009-03-14

恩恩明白了，谢谢大哥~``

作者: 14px 发布时间: 2009-03-14

对哦，还能这样触发，见识了，谢谢~

作者: 14px 发布时间: 2009-03-14

施主,这样写看可以不 ?

...

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:inline-block;} li { display:block; background:#f60;} .date { float:right;} </style> <body> <ul> <li> 2008-07-28 文字文字文字 </li> <li> 2008-07-28 文字文字文字 </li> <li> 2008-07-28 文字文字文字 </li> <li> 2008-07-28 文字文字文字 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: HeTingYi 发布时间: 2009-03-15

引用:

原帖由 HeTingYi 于 2009-3-15 00:43 发表
施主,这样写看可以不 ?

大师果然高啊~~

作者: birdstudio 发布时间: 2009-03-15

都是高手,看了真是长了见识了.谢谢各位.

作者: kenywang 发布时间: 2009-03-15

引用:

原帖由 birdstudio 于 2009-3-15 11:19 发表

大师果然高啊~~

低调低调 .. 互相学习而已 ....

作者: HeTingYi 发布时间: 2009-03-15

这个问题也经常困扰着我，存在于IE上面，虽然不能完全深入理解，但通过下面的例子我们应该能明白一些什么。在楼主的例子上

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:inline-block;} li { display:block; background:#f60;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

这样对li使用 清除浮动可以解决这个问题，可使用overflow:hidden等方法却不能解决这个问题。
当然给li增加float属性为left或者right也能解决这个问题。

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li { display:block; background:#f60;float:left} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

另外本人测试过程中，发现这个间隙的大小与字体的大小似乎也有关系。通常我们网页设置的默认字体一般为12px;而这个
间隙大小为li元素字体的尺寸(12px)的四分之一。我们将字体设置大一点,让我们能足够看清这个间隙的变化.

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li { display:block; background:#f60;height:150px;font-size:50px;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

这个间隙是否变大了很多啊（用IE6查看）
既然如此我们采用如下的解决方案。

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li { display:block; background:#f60;height:30px;font-size:0px;} .text { float:left;font-size:12px;} .date { float:right;font-size:12px;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

主要思路如下代码

复制内容到剪贴板

代码:

li { display:block; background:#f60;height:30px;font-size:0px;}
.text { float:left;font-size:12px;}
.date { float:right;font-size:12px;}

先将li的字体大小设置为0,间隙就是0的四分之一还是为0.然后将我们要显示的文字大小设置为对应的大小就OK了.

写的仓促，有不对之处敬请多多指教！

[ 本帖最后由 lijun198296 于 2009-3-16 08:40 编辑 ]

作者: lijun198296 发布时间: 2009-03-15

真是高人辈出的年代，和尚好强大。
楼上分析得详尽易懂~！~把这个bug的规律都挖掘出来了，实在佩服~！~

再次感谢各位的解答，让我学到了不少东西~也让我见识到了现代版八仙过海~````

作者: 14px 发布时间: 2009-03-16

大师这招确实不错,一招太极让BUG消失于无形

.
看似无招,却胜似千万招.

作者: lijun198296 发布时间: 2009-03-16

原来如此啊，学习了

作者: landseer 发布时间: 2009-03-16

很细致的分析，谢谢分享！

作者: birdstudio 发布时间: 2009-03-16

LI：vertical-align:bottom

或者

LI:float:left;clear:left;

即可...第一种会影响其内a连接有中英文混连的时候的下划线对齐

作者: aslen 发布时间: 2009-03-17

大师云集的帖子

作者: lixinlixin2008 发布时间: 2009-06-20

不错不错，学习了。

作者: qmwnegbb 发布时间: 2009-06-21

这个帖怎么以前没看到，还好现在看到了，收益颇多啊，收藏之。

作者: tmulmt 发布时间: 2009-06-21

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li {} li { display:block; background:#f60;line-height:120%;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

貌似这个解决方法没人提,这样子有什么问题么?
li里加line-height

作者: 4321285 发布时间: 2009-06-21

个人觉得风魂说的实用！大师的方式适用于li内是2个浮动元素的情况！如果是3个或者4个的话！这样可能不不太好使了！不过感谢大家了，因为今天我也遇到这个bug了！晕！！向高手学习！

作者: beyondmc 发布时间: 2009-08-04

学习了

作者: singlesoho 发布时间: 2009-08-04

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px;} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:inline-block; overflow:hidden; zoom:1;} li { display:block; background:#f60;} .text { float:left;} .date { float:right;} </style> <body> <ul> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> <li> 文字文字文字 2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

不过觉得13楼的方法最好。

作者: cikeaiwanzi 发布时间: 2009-08-04

引用:

原帖由 beyondmc 于 2009-8-4 14:13 发表
个人觉得风魂说的实用！大师的方式适用于li内是2个浮动元素的情况！如果是3个或者4个的话！这样可能不不太好使了！不过感谢大家了，因为今天我也遇到这个bug了！晕！！向高手学习！

如果是3个或者4个就用TABLE了吧。
千万别钻牛角尖。

作者: kaka48265 发布时间: 2009-08-04

相当强悍的帖子，学到很多自己想要的东西

作者: fhjzzx 发布时间: 2009-08-04

<!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" /> </head> <style> * { margin:0; padding:0; list-style:none;} ul { font:12px/18px simsun; width:200px} li:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} li { display:inline-block} li { display:block; background:#f60;text-align:right} .text {float:left;} </style> <body> <ul> <li>文字文字文字2008-07-28 </li> <li> 文字文字文字2008-07-28 </li> <li> 文字文字文字2008-07-28 </li> <li> 文字文字文字2008-07-28 </li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

作者: alien194 发布时间: 2009-09-07

非常感谢 4楼，长期困扰的问题

作者: chengsh0481 发布时间: 2010-12-06