Html 如何在多个div元素之间添加垂直线

我有多个div元素，我想在这些div之间添加一条垂直分隔线。以下是html：

     <div class="clone_container " >
     <a class="button-link">Clone</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Delete</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Abort</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Pause</a>
 </div>

克隆
删除
中止
暂停

我想要的输出是这样的： 克隆|删除|中止|暂停。 我怎样才能做到这一点呢？

嗯

Clone | Delete | Abort | Pause

完成了

---

好的，下面是HTML：

<div class="clone_container">
    <a class="button-link">Clone</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Delete</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Abort</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Pause</a>
</div>

---

简单地说，您可以尝试以下方法（）：

HTML:

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Delete</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Abort</a>
</div>

.clone_container{
    display:inline-block;
}

Clone  | Delete  | Abort  | Pause

span.separator{
    padding:0 2px;
    color:gray;
}

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
<span class='separator'>|</span>

输出：

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Delete</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Abort</a>
</div>

.clone_container{
    display:inline-block;
}

Clone  | Delete  | Abort  | Pause

span.separator{
    padding:0 2px;
    color:gray;
}

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
<span class='separator'>|</span>

您还可以将

|

放在另一个元素（

span

）中，并对该元素应用一些样式（）：

CSS:

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Delete</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Abort</a>
</div>

.clone_container{
    display:inline-block;
}

Clone  | Delete  | Abort  | Pause

span.separator{
    padding:0 2px;
    color:gray;
}

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
<span class='separator'>|</span>

HTML:

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Delete</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Abort</a>
</div>

.clone_container{
    display:inline-block;
}

Clone  | Delete  | Abort  | Pause

span.separator{
    padding:0 2px;
    color:gray;
}

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
<span class='separator'>|</span>

|

您可以使用CSS在每个元素（最后一个除外）的右侧添加边框：

.clone_container {
    display: inline-block;
    border-right: 1px solid #aaa;
    padding-right: 4px;
}

.clone_container:last-child {
    border-right: none;
}

---

谢谢，这正是我想要的！