边框之间居中的垂直线条

-1

我目前正在为网上商店制作结帐/谢谢你的订单页面，并且我在他们的文字中制作了不同的边框，以便在成功下订单之后解释这个过程。我给了我的边界一个橙色，并有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; 
}

这是边界1，我想要做的就是让在众人中间的垂直线，这样我就可以将它们关联起来。

来源

2016-08-02 Jimmbo

请，给我的代码 –

你什么意思的代码？喜欢这个？ .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; } 这是1的边界，我想要做的是在它们中间做一条垂直线，所以我可以将它们连接在一起。 – Jimmbo

在你的问题中注入这个 –

您的意思是？

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/

来源

2016-08-02 12:54:45

边框之间居中的垂直线条

回答

相关问题