如何移除inline-block列表换行位置元素的右侧边框？

针对这个需求，有两种实用的实现方式，按需选择即可：

纯CSS方案（推荐，无JS依赖） #

核心思路是利用边框重叠+容器溢出隐藏实现，完全不依赖内容长度和换行情况：

修改你的CSS代码如下：

ul{
  width: 200px;
  display: inline-block;
  list-style: none;
  text-align: center;
  overflow: hidden; /* 关键：隐藏每行最后一个元素超出容器的边框 */
}

li{
  display: inline-block;
  border-right: 1px solid rgb(0, 0, 0);
  margin-right: -1px; /* 关键：让相邻元素的边框重叠，抵消视觉重复 */
  padding: 0 8px; /* 可选：加内边距让内容不贴边框，提升体验 */
}

原理：每个li的右边框会被下一个li的左侧覆盖（margin-right: -1px的作用），而每行最后一个li没有后续元素，它的右边框会超出ul的固定宽度，被overflow: hidden直接隐藏，刚好符合需求。

JavaScript方案（适配复杂场景） #

如果纯CSS方案满足不了特殊需求，可以用JS动态判断每行最后一个元素：

<ul id="list">
  <li>Any text</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text</li>
  <li>Any text different</li>
  <li>Any text sas s as s</li>
</ul>

<script>
function removeLineLastBorder() {
  const list = document.getElementById('list');
  const items = list.querySelectorAll('li');
  if (!items.length) return;
  
  let lastTop = items[0].offsetTop;
  // 先重置所有元素的边框
  items.forEach(item => item.style.borderRight = '1px solid #000');
  
  // 遍历判断换行节点
  for(let i = 1; i < items.length; i++) {
    const currentTop = items[i].offsetTop;
    if(currentTop !== lastTop) {
      // 当前元素换行了，上一个就是行末元素
      items[i-1].style.borderRight = 'none';
      lastTop = currentTop;
    }
  }
  // 移除最后一行最后一个元素的边框（按需选择）
  items[items.length - 1].style.borderRight = 'none';
}

// 页面加载和窗口 resize 时重新计算
window.addEventListener('load', removeLineLastBorder);
window.addEventListener('resize', removeLineLastBorder);
</script>

原理：通过对比每个li的offsetTop值判断是否换行——如果当前元素的top值和上一个不同，说明进入新行，上一个元素就是该行的最后一个，移除它的右边框。窗口大小变化时重新计算，适配不同屏幕宽度。

内容的提问来源于stack exchange，提问作者fetixzz