如何连续添加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

您可以使用Trusted_Connection=True将此间隙包含在框中，其中绘制了边框。

＆＃13;

＆＃13;

{
    "AppSettings": {
        "Environment": "UAT",
        "ConnectionString": "server=localhost\\SQLEXPRESS;database=TrendingDB;Connect Timeout=120;User=webservice;Password=trending123"
    }
}

＆＃13;

box-sizing: border-box;

＆＃13;

＆＃13;

＆＃13;

Answer 2

@Sebastian Speitel在这里的答案没有错，但我认为你的问题有点含糊不清。如果您希望垂直黑线在 红色边框上 ，那么这里就是一些东西。我使用了一个伪元素来创建边框，因为你不能在边框上使用z-index（但你可以在一个轮廓上，但你不能只在一边有一个轮廓......）。在任何情况下，这看起来都有效。有一个＆＃34;魔术数字＆＃34;涉及，但它基于原始CSS中的幻数（102跨度宽度+20边距）。

＆＃13;

＆＃13;

* {
    	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;
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;