如何用CSS实现列表元素边框无重叠且可完整高亮？

DevOps 小满

2026-7-17

纯CSS解决列表边框不重叠且高亮边框完整显示的问题

当前实现通过负margin抵消边框的方式，会导致高亮元素的下边框被下方元素的上边框覆盖，同时边框重叠问题未彻底解决。以下提供两种纯CSS方案，分别适配垂直/横向排列的列表场景：

方案一：垂直排列列表（适配你的示例场景）

核心思路：不给列表项设置上边框（仅第一个列表项保留上边框），通过下边框衔接上下元素，彻底避免边框重叠；高亮元素直接修改边框颜色即可完整显示。

#navigation_bar {
  list-style-type: none;
  width: 100%;
  padding: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
}

#navigation_bar li {
  text-align: center;
  width: 32%;
  /* 只保留左、右、下边框 */
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0; /* 添加内边距优化排版 */
}

/* 第一个列表项添加上边框 */
#navigation_bar li:first-child {
  border-top: 1px solid black;
}

/* 高亮元素修改所有边框颜色 */
#navigation_bar li.hilighted {
  border-color: red;
}

<ul id="navigation_bar">
  <li>Projection</li>
  <li class="hilighted">Real-Time</li>
  <li style="display:none;">Invisible</li>
  <li>Cleanup</li>
</ul>

方案二：横向排列列表（若需横向布局）

如果需要列表项横向排列，可使用Flex布局，通过移除相邻元素的重复边框实现无重叠效果：

#navigation_bar {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex; /* 横向排列 */
}

#navigation_bar li {
  text-align: center;
  flex: 1; /* 平分容器宽度 */
  border: 1px solid black;
  border-left: none; /* 移除左侧边框避免重叠 */
  padding: 8px 0;
}

/* 第一个列表项恢复左侧边框 */
#navigation_bar li:first-child {
  border-left: 1px solid black;
}

#navigation_bar li.hilighted {
  border-color: red;
}