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你是要通过删除或者调整宽高实现吗