html - CSS，内联 block 按钮(链接)之间的垂直分隔符

Question

我有几个按钮，想在“按钮 1”和“按钮 2”之间添加垂直分隔符(分隔符)。我知道可以将我的链接包装在带边框的 div 中:

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

Answer 1

您可以将 :after 添加到按钮并将其设置为看起来像边框

#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