首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → li撑开的高度不一样，下一行排列会出现空白。

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

时间：2011-09-01

来源：互联网

问题是这样的如果li里的文字太多，但是其他的又太少了。换行的时候没办法直接在第二行显示。文字高度高的那行会自动空白排到第二个。第一个就会出现空白。。。哈。不晓得描述的能不能明白。。。还烦请大家帮我看一下吧。谢谢咯。
HTML code 
<!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" />
<p>
<strong>流线型车身线条</strong><br />
优美的流线型车身线条依据空气动力学研发设计，一气呵成，有效地减少风阻系数，进一步优化驾驶性
能和燃油经济性。缀以气度饱满、张力凸显的轮拱设计，将整体车型打造得更加豪</p></li>
<li><img src="upload/02.jpg" width="287" height="177" />
<p>
<strong>立体直瀑式镀铬格栅</strong><br />

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

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

HTML code 
<!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;
    height:260px;
    }</style>
</head>

<body>
<div class="motorcycle line">
<ul>
<li><img src="upload/01.jpg" width="287" height="177" />
<p>
<strong>流线型车身线条</strong><br />
优美的流线型车身线条依据空气动力学研发设计，一气呵成，有效地减少风阻系数，进一步优化驾驶性
能和燃油经济性。缀以气度饱满、张力凸显的轮拱设计，将整体车型打造得更加豪</p></li>
<li><img src="upload/02.jpg" width="287" height="177" />
<p>
<strong>立体直瀑式镀铬格栅</strong><br />

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


给li定义一个高度就行了~·

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

高度最好是默认的比较好。因为底下还有更多的文字的。

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

引用 2 楼 xiaoxiaoo7 的回复:
高度最好是默认的比较好。因为底下还有更多的文字的。


那没有办法~·只能定义好高度，才不会出现你之前那个问题。

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

如果不设定高度。其他排版的呢？我试了用dl的排版也不行。除非一行一个div。。。。有更简洁的方式没？哈。。。还是要谢谢你。。

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

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net