如何在不断裂的情况下连续添加CSS右边界

Question

如何在不断裂的情况下连续添加border-right？并使其通过red 行而不会破裂。您可以在我的代码下方看到它如何破裂。

ul.ul li{
  list-style:none;
    width: 100%;
    height: 19px;
    background: #d3c3e2;
    border: 1px solid red;
} 
ul.ul li .span-1 {
    position: relative;
    width: 102px;
    border-right: 1px solid black;
    margin-right:20px;
    padding-right: 12px;
}
ul.ul li .span-2 {
    position: relative;
    width: 50%;
    border-right: 1px solid black;
}

<ul class="ul">
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
</ul>

Answer 1

您可以使用box-sizing: border-box;将此缝隙包括在框中，在框中绘制边框。

ul.ul li {
  list-style: none;
  width: 100%;
  height: 19px;
  background: #d3c3e2;
  border: 1px solid red;
  box-sizing: border-box;
}
ul.ul li .span-1 {
  position: relative;
  width: 102px;
  border-right: 1px solid black;
  margin-right: 20px;
  padding-right: 12px;
}
ul.ul li .span-2 {
  position: relative;
  width: 50%;
  border-right: 1px solid black;
}

<ul class="ul">
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
  <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
</ul>

Answer 2

在这里@sebastian Speitel的答案没有错，但是我认为您的问题只是有点模棱两可。如果您希望垂直黑线在 顶部的红色边框上，那么这里有些东西。我使用伪元素来创建边框，因为您不能在边框上使用z索引(但是您可以在轮廓上使用，但是您不能仅在一侧都有轮廓...(。无论如何，这看起来有效。涉及一个"魔术数"，但它基于您原始CSS中的魔术数(102跨度宽度 20个边距(。

* {
    	margin: 0px;
    	padding: 0px;
    }
    ul {
    	position: relative
    }
    ul.ul li{
      list-style:none;
        width: 100%;
        height: 19px;
        background: #d3c3e2;
        border: 1px solid red;
    }     
    ul.ul li .span-1 {
        position: relative;
        width: 102px;
        margin-right:20px;
        padding-right: 12px;
    }   
    ul::before {
    	content: "";
    	position: absolute;
    	height: 100%;
    	width: 1px;
    	background-color: black;
    	left: 122px;
    }

    <ul class="ul">
      <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
      <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
      <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
      <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
      <li><span class="span-1">first span content</span><span class="span-12">second c</span></li>
    </ul>