qq_37727187 2022-11-15 16:21 采纳率: 89.8%
浏览 18
已结题

html中多个li标签 ，内容相同的合并（就像合并单元格），请问，如何实现

html中多个li标签 ，内容相同的合并（就像合并单元格），请问，如何实现

  • 写回答

7条回答 默认 最新

  • liuwenjie_ 2022-11-16 09:44
    关注

    拿去用

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    li {
      list-style: none;
      float: left;
      border: 1px solid #000;
      text-align: center;
    }
  </style>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
</html>
<script>
  const uLi = document.querySelectorAll("li");
  const liWidth = 20;
  uLi.forEach((item) => {
    item.style = `width:${liWidth}px`;
  });
  for (let i = 0; i < uLi.length - 1; i++) {
    if (uLi[i].innerHTML == uLi[i + 1].innerHTML) {
      uLi[i].style = `width:${liWidth + liWidth}px`;
      uLi[i + 1].style = "display:none";
    }
  }
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

问题事件

  • 系统已结题 11月25日
  • 已采纳回答 11月17日
  • 创建了问题 11月15日

悬赏问题

  • ¥15 有偿四位数，节约算法和扫描算法
  • ¥15 VUE项目怎么运行，系统打不开
  • ¥50 pointpillars等目标检测算法怎么融合注意力机制
  • ¥15 关于超局变量获取查询的问题
  • ¥20 Vs code Mac系统 PHP Debug调试环境配置
  • ¥60 大一项目课，微信小程序
  • ¥15 求视频摘要youtube和ovp数据集
  • ¥15 在启动roslaunch时出现如下问题
  • ¥15 汇编语言实现加减法计算器的功能
  • ¥20 关于多单片机模块化的一些问题