统一li高度以最大的为基准的自适应高度

最新推荐文章于 2021-10-09 09:42:17 发布

Daisukes

最新推荐文章于 2021-10-09 09:42:17 发布

阅读量3.3k

点赞数 2

分类专栏： web jquery javascript

本文链接：https://blog.csdn.net/Daisukes/article/details/52691857

版权

web 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

先获取最高的li高度，然后将所有的li重新设置一下高度

<!DOCTYPE html>

 
  <html> 
 
  <head> 
 
  <title>TODO supply a title</title> 
 
  <meta charset="UTF-8"> 
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
  <style> 
 
  li{list-style:none;background:blue;margin:2px 0;color:#ffffff} 
 
  </style> 
 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
 
  </head> 
 
  <body> 
 
  <ul> 
 
  <li>aaaa</li> 
 
  <li>bbbbbbbbb<br/>bbbbbb</li> 
 
  <li>cccccc<br />ccccccc<br />ccccc</li> 
 
  </ul> 
 
  <script type="text/javascript"> 
 
  var maxheight = 0; 
 
  for(var i = 0;i<$("li").length;i++){ 
 
  if(maxheight <= $("li").eq(i).height()){ 
 
  maxheight = $("li").eq(i).height(); 
 
  } 
 
  } 
 
  $("li").css('height',parseInt(maxheight)+'px'); 
 
  </script> 
 
  </body> 
 
  </html>