首页 新闻 会员 周边

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 | 园豆：30994 (高人七级) | 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 | 园豆：30994 (高人七级) | 2011-10-17 19:11
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。