如何实现CSS右侧边框连续无中断且穿过红色边框？

嘿，我来帮你搞定这个border-right被红色边框打断的问题！先给你捋下原因：现在你的span是li的子元素，默认高度只跟着内容走，再加上li的红色边框在最外层，导致span的border-right到不了li的上下边缘，看起来就断了。下面给你两种实用的解决方案：

方案一：绝对定位让span撑满并超出li边界 #

这种方法通过绝对定位让span的高度覆盖li的整个区域（包括红色边框），直接让border-right贯穿到底：

ul.ul {
  padding: 0; /* 去掉ul默认内边距，避免布局错位 */
}
ul.ul li{ 
  list-style:none; 
  width: 100%; 
  height: 19px; 
  background: #d3c3e2; 
  border: 1px solid red; 
  position: relative; /* 给子元素绝对定位做参考 */
  box-sizing: border-box; /* 让height包含border，总高度保持19px */
  padding: 0;
}
ul.ul li .span-1 { 
  position: absolute;
  top: -1px; /* 超出li顶部1px，刚好覆盖红色边框 */
  bottom: -1px; /* 超出li底部1px */
  width: 102px; 
  border-right: 1px solid black; 
  margin-right:20px; 
  padding-right: 12px; 
  display: flex;
  align-items: center; /* 让文字垂直居中 */
}
ul.ul li .span-2 { 
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(102px + 20px + 12px); /* 计算左边位置，对应span-1的宽度+margin+padding */
  width: 50%; 
  border-right: 1px solid black;
  display: flex;
  align-items: center;
}

方案二：伪元素替代border-right（更灵活） #

如果不想用绝对定位计算位置，推荐用伪元素来做边框，配合flex布局让span自然排列：

ul.ul {
  padding: 0;
}
ul.ul li{ 
  list-style:none; 
  width: 100%; 
  height: 19px; 
  background: #d3c3e2; 
  border: 1px solid red; 
  box-sizing: border-box;
  display: flex; /* 让两个span横向排列 */
  align-items: center; /* 垂直居中文字 */
}
ul.ul li .span-1 { 
  position: relative; 
  width: 102px; 
  margin-right:20px; 
  padding-right: 12px; 
}
/* 用伪元素实现贯穿的border-right */
ul.ul li .span-1::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: 0;
  width: 1px;
  background-color: black;
}
ul.ul li .span-2 { 
  position: relative; 
  width: 50%; 
}
ul.ul li .span-2::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: 0;
  width: 1px;
  background-color: black;
}

两种方案都能实现border-right穿过红色边框不中断的效果，方案二更适合后续调整布局，不需要手动计算位置～

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