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

您可以尝试这样的事情（Example）：

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

<强> CSS：

.clone_container{
    display:inline-block;
}

<强>输出：

Clone  | Delete  | Abort  | Pause

此外，您可以将|放在另一个元素（span）中并对其应用一些样式（Example）：

<强> CSS：

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

<强> HTML：

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

Answer 2

您可以使用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/

Answer 3

嗯...

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>

如果你想让一位爱好者看一眼，你可以用CSS做到这一点：

.clone_container:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #aaa;
}

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

3 个答案: