边界之间的中心垂直线

Question

我目前正在为网上商店制作一个结帐/谢谢你的订单页面，我在其中创建了不同的边框，并在您成功下订单后解释了该过程。我给了我的边框一个橙色，并在彼此之下连续4个。我想在它们的中心有一条橙色的线条，所以我可以将它们连接在一起并设计它们，这样我就能按时间顺序完成它们的订单如何到达家中。我希望这是有道理的，因为我不知道如何以任何其他方式解释它，我无法绕过我要看的地方或寻找什么。能理解这一点的人能帮帮我吗？

.opsomming {
    width: 600px;
    border: 1px;
    border-style: solid;
    padding: 5px;
    margin-top: 3;
    border-color: #FFA500;
    box-shadow: 2px 2px 2px ##3F3F3F;
    font-family: Georgia, Times;
    font-weight: 400;
    border-radius: 3px;
    background-color: #FFBA43;
}

这是边框中的一个，我想做的是在它们中间竖起一条垂直线，所以我可以将它们连接在一起。

Answer 1

你的意思是这样吗？

HTML

<div class="leftline-wrap">
  <div class="opsomming">content</div>
  <div class="opsomming">content</div>
  <div class="opsomming">content</div>
  <div class="opsomming">content</div>
</div>

CSS

.opsomming {
    width: 600px;
    border: 1px;
    border-style: solid;
    padding: 5px;
    margin-top: 3;
    border-color: #FFA500;
    box-shadow: 2px 2px 2px #3F3F3F;
    font-family: Georgia, Times;
    font-weight: 400;
    border-radius: 3px;
    background-color: #FFBA43;
}
.opsomming {
    margin-left:10px;margin-bottom:5px;max-width: 90%;position:relative;
}
.opsomming:before { 
    display:block;
    content: "";
    border-top: 1px solid #FFA500;
    width:10px;
    height:1px;
    position:absolute;
    left:-10px;
    top:45%;
    margin-top: 0px;
    margin-left:-1px;
}
.leftline-wrap {
    border-left: 1px solid #FFA500; 
}

（1）https://jsfiddle.net/q6xzxoan/2/

或者像这样

（2）https://jsfiddle.net/9ua89hds/4/