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

Question

我有多个 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>

我正在寻找的输出是这样的: 克隆 |删除 |中止 |暂停。 我怎样才能做到这一点？

Answer 1

您可以使用 CSS 在每个元素(最后一个元素除外)的右侧添加边框:

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

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

http://jsfiddle.net/xE68V/