当前位置：首页 → 问答吧 → li撑开的高度不一样，下一行排列会出现空白。

li撑开的高度不一样，下一行排列会出现空白。

时间：2011-09-01

来源：互联网

问题是这样的如果li里的文字太多，但是其他的又太少了。换行的时候没办法直接在第二行显示。文字高度高的那行会自动空白排到第二个。第一个就会出现空白。。。哈。不晓得描述的能不能明白。。。还烦请大家帮我看一下吧。谢谢咯。

<!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>无标题文档</title> <style> body { font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; margin:0px auto; padding:0px 0px; text-align:center; color: #666; } ul{ margin:0px auto; padding:0px 0px; list-style-type:none; } .motorcycle{ margin:10px 10px; } .motorcycle ul{ margin:0px 0px ; padding:0px 0px; width:970px; } .motorcycle li { float:left; width:287px; padding:0px 0px; margin:10px 17px 10px 18px; text-align:left; }</style> </head> <body> <div class="motorcycle line"> <ul> <li><img src="upload/01.jpg" width="287" height="177" /> 流线型车身线条 优美的流线型车身线条依据空气动力学研发设计，一气呵成，有效地减少风阻系数，进一步优化驾驶性能和燃油经济性。缀以气度饱满、张力凸显的轮拱设计，将整体车型打造得更加豪</li> <li><img src="upload/02.jpg" width="287" height="177" /> 立体直瀑式镀铬格栅 饰有别克三盾徽章的镀铬格栅，尽显独一无二的大气格局，预示出昂科雷所蕴含的澎湃动力。 </li> <li><img src="upload/03.jpg" width="287" height="177" /> 经典镀铬舷窗 承袭了别克经典的设计元素，顺承发动机盖涌动的气蕴，透射出动感磅礴的昂然气势。 </li> <li><img src="upload/04.jpg" width="287" height="177" /> 豪华电动双天窗 昂科雷独特的豪华电动双天窗设计，让驾乘者倍添宽敞自然的空间感受。 </li> <li><img src="upload/05.jpg" width="287" height="177" /> HID高亮度晶钻氙气大灯 散发灵动雅致的幽蓝光束，备添奢华气息，旗舰版配备随动转向功能，在车辆转弯时，可根随前轮自动调整方向，更加出色地照亮前方路况。 </li> <li><img src="upload/06.jpg" width="287" height="177" /> 流线型车身线条 优美的流线型车身线条依据空气动力学研发设计，一气呵成，有效地减少风阻系数，进一步优化驾驶性能和燃油经济性。缀以气度饱满、张力凸显的轮拱设计，将整体车型打造得更加豪迈动感。 </li> <li><img src="upload/07.jpg" width="287" height="177" /> 奢华镀铬双排气管 等长的镀铬双排气管，散发出极具现代感的金属质泽，动感姿态跃然眼前。与发动机配合输出强劲动力，并最大限度地降低了排气噪音。 </li> <li><img src="upload/08.jpg" width="287" height="177" /> 20寸镀铬全铝轮毂 昂科雷分别配备了19寸和20寸两款轮毂，其中精英版是19寸7幅高亮镀铬铝轮毂；旗舰版为20寸9幅高亮镀铬铝轮毂，飞驰中闪现耀眼光芒。两款车型分别对应的固特异Eagle RS-A系列255/60R19轮胎和普利司通DUELER H/L ALENZA 255/55R20轮胎，完美贴合轮毂，提供更强的抓地力。 </li> </ul></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: xiaoxiao7 发布时间: 2011-09-01

float定位就这样，第一行前两个li高度不同，导致第二排的li float定位到了现在那里。解决方法么，要么给每一行加一个ul,设overflow:hidden;这样可以保证同一行的li显示高度是一样的。不过类似情况我一般是给每个li设固定高度，加overflow:hidden; 也就是溢出隐藏，反正这种列表页一般都是显示一个大概信息，截取一部分也不怎么影响

作者: ypd007 发布时间: 2011-09-01

呵呵。给每行加了个ul了。因为这要表现出来就已经是详细信息了。所以不能省略。加高度的话也是不可以的。因为还有其他文字信息比较多。有些就比较少了。那样的话。就会空白也不好看。哈。。谢谢咯。。。。

作者: xiaoxiao7 发布时间: 2011-09-01

合理的解决办法是定个高度，其他没有太好的办法，另外 ie6 会撑开高度，所以还需要对内容量控制。漂亮的页面同样需要配合漂亮的内容

作者: qilei0529 发布时间: 2011-09-01