首页新闻找找看学习计划

li 行间距自适应

0
悬赏园豆:50 [已解决问题] 解决于 2011-10-18 15:42

li 的行间距怎样做到自适应?例如这张图片!文字可能是1行、2行也可能是3行(1张图片加一个文字描述是一个li)!怎样实现让行间距自适应??

迷恋郭德纲的主页 迷恋郭德纲 | 初学一级 | 园豆:67
提问于:2011-10-17 14:54
< >
分享
最佳答案
0

ul{width:xxxpx;*padding-left:-10px} xxx自己定义宽度就好了,两个绿颜色数值要一样子

li{display:block,width:104px;float:left;line-height:20px;overflow:hidden;margin-left:10px}

li img{display:block} 图片要怎么样修饰你自己发挥 block 保证文字换行到图片下面

这样写可能有一个IE6的bug就是IE6左边会出现一个margin-left 为20px的双倍边距,自己写一个IE6的hack 让ul 为IE6的时候padding-left:-10px 就可以了

收获园豆:20
hbren | 小虾三级 |园豆:684 | 2011-10-17 23:27
其他回答(3)
0

你设好宽度不设高度,它不就是自适应的了?

收获园豆:20
LCM | 园豆:6876 (大侠五级) | 2011-10-17 15:55
0

现在不是正常吗

收获园豆:5
深蓝色梦想 | 园豆:6 (初学一级) | 2011-10-17 17:10

这是我ps出来的!呵呵!我想要这中效果!!

支持(0) 反对(0) 迷恋郭德纲 | 园豆:67 (初学一级) | 2011-10-17 17:17
0

建议提供一下ps之前的图前

收获园豆:5
dudu | 园豆:41258 (高人七级) | 2011-10-17 17:27

代码是这样的:.mainright-proc ul{overflow:hidden;zoom:1;} .mainright-proc ul li{text-align:center;line-height:20px;width:126px; display:inline; height:auto; } .mainright-proc ul li a{display:block;height:auto;word-break: break-all; overflow:hidden;  weight:126px; height:auto;} .mainright-proc ul li img{border:1px solid #CCC height:auto;}

现在文字确实自动适应高度!但是图片会篡位!

支持(0) 反对(0) 迷恋郭德纲 | 园豆:67 (初学一级) | 2011-10-17 18:03

@珍子: 为文字所在的div设置一个高度(如果没有div,增加一下),高度值为3行文字的高度。

支持(0) 反对(0) dudu | 园豆:41258 (高人七级) | 2011-10-17 19:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册