码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-10-11 14:21:05      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   ar   strong   sp   

目标:形成兼容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和超出字数...效果

标签:style   blog   http   color   io   os   ar   strong   sp   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!