html - 边界之间的居中垂直线

Question

我目前正在为一家网上商店制作一个结帐/thankyouforyourorder 页面，我在其中用文字制作了不同的边框，以解释您成功下单后的流程。我给了我的边框橙色，并在彼此下面连续放置了 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/