邊框之間居中的垂直線條

-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

邊框之間居中的垂直線條

回答

相關問題