首页 > 其他 > 详细

实现兼容的两栏的li列表,带disc和超出字数...效果

时间:2014-10-11 13:12:16      阅读:151      评论:0      收藏:0      [点我收藏+]

目标:形成兼容ie7+的li 两列列表

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

css

ul + clearfix的class
li+text-overflow  的class{
  float:left;
  background:url(disc.jpg) no-repeat;
  padding-left: 10px; //给background-image留一个位置  
  padding-top/bottom:最好一致//disc才会居中
  width:380px; //超过长度变成...
  margin-right:30px; //和右边li的间距;用padding会有兼容问题          
}

.clearfix:after {
    content:"";
    display:block;
    visibility:hidden;
    height:0px;
    line-height:0px;
    clear:both;
    zoom:1;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 

出现问题的两方面

左边list-style-type

在ie7及以下,li下的list-style-type会因为float:left;  list-style-position:outside; width:xxpx; 等等原因消失

统一解决方法:给li bakcground:url() no-repeat left middle; padding-left:10px;

右端用padding会出现兼容问题,改为margin-right就可以

示意图如下

bubuko.com,布布扣

实现兼容的两栏的li列表,带disc和超出字数...效果

原文:http://www.cnblogs.com/cjy1993/p/4018706.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!