CSS，行內塊按鈕（鏈接）之間的垂直分隔符

我有幾個按鈕，並且希望在「按鈕1」和「按鈕2」之間添加垂直分隔符（分隔符）。我明白，可以包裝我的鏈接在邊界div：CSS，行內塊按鈕（鏈接）之間的垂直分隔符

<div id="delimeterDiv" style="border-right: 1px solid #C0C0C0;"> 
</div>

但我希望我的鏈接在一行。如果我將其添加來自其他行啓動另一個DIV ..

這裏的jsfiddle： https://jsfiddle.net/Rockietm/dtnwmdho/

下面是我想：

這裏是代碼：

<style> 
     #buttons { 
      margin-bottom: 12px; 
      height: 46px; 
     } 

     #buttons > a { 
      color: black; 
      padding: 10px; 
      margin-right: 15px; 
      margin-top: 2px; 
      font-size: large; 
      text-decoration: none; 
      display: inline-block; 
     } 

     /* button colors */ 
     #buttonone { 
      background-color: #DCDCDC; 
     } 

     #buttontwo { 
      background-color: #C4E2F3; 
     } 

     #buttonthree { 
      background-color: #B2F0C8; 
     } 
    </style> 
    <div id="buttons"> 
     <a id="buttonone" href="#" >Button 1</a> 
     <a id="buttontwo" href="#">Button 2</a> 
     <a id="buttonthree" href="#">Button 3</a> 
    </div>

來源

2017-04-26 Gennady G

您可以將:after添加到按鈕，並將其設計得像一個bor明鏡

#buttons > a:after { 

     content:''; 
     position:absolute; 
     top: 0; 
     right: -10px; 
     height:100%; 
     width: 1px; 
     background: #000; 

} 

#buttons > a:last-child:after{ 
     width: 0;/*remove border from the last button*/ 
}

See jsfiddle

來源

2017-04-26 12:50:43 Chiller

同樣的方法避免了第一胎https://jsfiddle.net/dtnwmdho/3/ :) –

@ GCyrillus，完美的作品:) – Chiller

添加它作爲一個答案完成你的工作也很好;） –

用不同的方式應答（僞+絕對）類似基地完成@Chiller答案的。

#buttons>a:first-child~a:before { 
 
    content: ''; 
 
    border-left: double gray; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: -12px; 
 
} 
 

 

 
} 
 
#buttons { 
 
    margin-bottom: 12px; 
 
    height: 46px; 
 
} 
 
#buttons>a { 
 
    color: black; 
 
    padding: 10px; 
 
    margin-right: 15px; 
 
    margin-top: 2px; 
 
    font-size: large; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
/* button colors */ 
 
#buttonone { 
 
    background-color: #DCDCDC; 
 
} 
 
#buttontwo { 
 
    background-color: #C4E2F3; 
 
} 
 
#buttonthree { 
 
    background-color: #B2F0C8; 
 
}

<div id="buttons"> 
 
    <a id="buttonone" href="#">Button 1</a> 
 
    <a id="buttontwo" href="#">Button 2</a> 
 
    <a id="buttonthree" href="#">Button 3</a> 
 
</div> 
 
<!--buttons-->

https://jsfiddle.net/dtnwmdho/3/

來源

2017-04-26 12:58:58

應該可以幫助您：

#buttons> a:first-child:after { 
    border-right: 1px solid black; 
    content: " "; 
    position: relative; 
    right: -20px ; 
    padding: 10px 0;   
}

來源

2017-04-26 13:53:11 seven

CSS，行內塊按鈕（鏈接）之間的垂直分隔符

回答

相關問題