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 Python报错怎么解决
  • ¥15 simulink如何调用DLL文件
  • ¥15 关于用pyqt6的项目开发该怎么把前段后端和业务层分离
  • ¥30 线性代数的问题，我真的忘了线代的知识了
  • ¥15 有谁能够把华为matebook e 高通骁龙850刷成安卓系统，或者安装安卓系统
  • ¥188 需要修改一个工具，懂得汇编的人来。
  • ¥15 livecharts wpf piechart 属性
  • ¥20 数学建模，尽量用matlab回答，论文格式
  • ¥15 昨天挂载了一下u盘，然后拔了
  • ¥30 win from 窗口最大最小化，控件放大缩小，闪烁问题