html – 如何删除div的特定宽度中第一行的最后一个li :: after

2023年5月30日 221次阅读 
.footer-links{             
    width: 600px;    
    margin: 0 auto;             
    background-color: #efefef;         
}
.footer-links li {             
    display: inline-block;             
    padding: 2px 0 6px 20px;         
}         
.footer-links li:first-child {
    padding-left: 0;         
}         
a{             
  text-decoration: none;
  color: #000;             
  line-height: 25px; 
}         
a:hover{
  color: #c56;         
}         
.footer-links li::after {             
  color:#c95413;             
  content: "/";             
  margin-left: 18px;
}
.footer-links li:last-child::after {            
 display: none;         
}
<div class="footer-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy something</a></li>
        <li><a href="#">Ecosystem Partners</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy products</a></li>
        <li><a href="#">Ecosystem products</a></li>
      </ul>
    </div>

这是我的HTML看起来如何

    <div class="footer-links">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy something</a></li>
        <li><a href="#">Ecosystem Partners</a></li>
        <li><a href="#">Careers</a></li>          
        <li><a href="#">Buy products</a></li>
        <li><a href="#">Ecosystem products</a></li>
      </ul>
    </div>

这是我的CSS看起来像

.footer-links{             
    width: 600px;    
    margin: 0 auto;             
    background-color: #efefef;         
}
.footer-links li {             
    display: inline-block;             
    padding: 2px 0 6px 20px;         
}         
.footer-links li:first-child {
    padding-left: 0;         
}         
a{             
  text-decoration: none;
  color: #000;             
  line-height: 25px; 
}         
a:hover{
  color: #c56;         
}         
.footer-links li::after {             
  color:#c95413;             
  content: "/";             
  margin-left: 18px;
}
.footer-links li:last-child::after {            
 display: none;         
}

我想删除这些标有红色的东西.链接是动态添加的,所以我们不能说哪个是第一行中的最后一个li,哪个’li’将换行到下一行.我们怎么办呢？

https://jsfiddle.net/mrganeshraj/q99dkLk2/

最佳答案 您可以使用此jquery代码.将类添加到li并使用css删除divider.

var linkHgt = $('li').height();
$('li').each(function(){  
  if($(this).position().top > linkHgt){    
    $(this).css('padding-left','0');
    $(this).prev('li').addClass('break');
    return false;
  } 
});
点赞