CSS, 인라인 블록 버튼 (링크) 사이의 수직 경계 구분자

Question

버튼이 거의없고 '버튼 1'과 '버튼 2'사이에 수직 구분 기호 (구분 기호)를 추가하고 싶습니다. 국경과 div에 내 링크를 감쌀 수 있다는 것을 이해합니다.

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

하지만 한 줄로 내 링크를 원합니다. 다음 https://jsfiddle.net/Rockietm/dtnwmdho/

내가 얻고 싶은 것입니다 : 내가 다른 줄에서 시작하는 다른 사업부를 .. 추가 할 경우

다음

는 jsfiddle입니다

을하고 여기에 코드 :

<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> 

Answer 1

버튼에 :after을 추가하고 붕어처럼 보이도록 스타일을 지정할 수 있습니다. @Chiller 대답의를 완료하기 위해 다른 접근 방식과 대답 (의사 + 절대)에 대한

#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

Answer 2

유사 기지를 데르.

#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/

Answer 3

당신을 도움이 될 것입니다

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