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

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

拿去用

<!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>

怎么个合并法 两个相邻的一样才 合并? 给个 你现在的布局 看看

用table吧,li貌似不支持这种操作。

首先你这个思路我感觉有问题,怎么会有这种需求呢?哈哈
其次,我觉得你应该从数据上去处理解决而不是在页面中去处理标签
相同内容合并,你大可把数据去重,那你在页面展示出来后不就是合并后的效果嘛

table

用表格,合并单元格吧

table表格横向纵向都可以合并,前提是你挨着的单元格,li你是要通过删除或者调整宽高实现吗