针对IE 去除 ul>li下列表的最右边的间距

本文介绍了一种在IE8浏览器下实现响应式布局的方法,通过JavaScript函数调整元素的margin-right属性,确保在不同数量的列表项下都能整齐排列,避免了在IE8下可能出现的布局错乱问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//兼容ie8 布局样式

//lengNamem  ul----Class

//num 数量
function styleMargin(lengNamem,num){
    for(var i = 0;i<=lengNamem.length;i++){
        if((i + 1) % num == 0){
            lengNamem.eq(i).css("margin-right","0");
        }
    }
}

//调用

styleMargin($(box).find('li'),3);

 

我用的是eyoucms,现在由于是自适应的问题,图片和标题的问题倒是样式没对齐,请帮我对齐一下,下面是代码 <div class="page-main"> <div class="newslist list1"> {eyou:list titlelen='40' loop='12'} <li> <div class="news-img"> <div class="date"><span>{$field.update_time|MyDate='d',###}</span><span>{$field.update_time|MyDate='m',###}</span><span>{$field.update_time|MyDate='Y',###}</span></div> <a href="{$field.arcurl}" class="lazy-wrap"> <img src="{$field.litpic}" data-sizes="361x0 768w,318x0 1024w,249x0 1280w,267x0 1366w,291x0 1440w,342x0 1600w" alt="{$field.title}"/> </a> </div> <div class="news-info"> <a href="{$field.arcurl}" class="title line2">{$field.title}</a> <div class="text line3">{$field.seo_description|html_msubstr=###,0,60,true}</div> <a href="{$field.arcurl}" class="btn" title="{$field.title}"><em class="iconfont icon-jiahao"></em>read more</a> </div> </li> {/eyou:list} </div> <div class="mypages"> <ul> {eyou:pagelist listitem="index,pre,next,end,pageno" listsize="1" /} </ul> </div> </div>,这是css.newslist.list1 li { width: 32%; margin-right: 2% } .newslist.list1 li:nth-child(3n) { margin-right: 0px } .newslist.list1 li .news-info { padding: 20px 0px } .newslist.list1 li .news-img { width: 100%; min-height: 100px; background: #F3F3F3 } .newslist.list0 li { width: 100%; display: flex; align-items: center } .newslist.list0 li .news-img { width: 300px } .newslist.list0 li .news-info { flex: 1; padding: 0px 20px } .newscontent-title { font-size: 28px; font-weight: var(--fontblod5); line-height: 1.2 } .newscontent-date { display: flex; flex-wrap: wrap; align-items: center; padding: 15px 0px; font-size: 15px; color: var(--color) } .newscontent-date span { margin-right: 20px } .newscontent-date span em { margin-right: 5px } .newscontent-details article { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #d6d6d6 } .newscontent-details .share-btn-list { justify-content: flex-end }
最新发布
08-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值