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

我有多个div元素，我想在这些div之间添加一个垂直的分隔线。下面是HTML：如何在多个div元素之间添加垂直线

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

我在寻找的输出是这样的：克隆|删除|中止|暂停。我该如何做到这一点？

来源

2014-04-27 user2942566

您可以在每个元素的右侧添加边框（除了最后一个）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/

来源

2014-04-27 00:35:26

谢谢，正是我在找的！ – user2942566

呃......

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

来源

2014-04-27 00:26:55 bjb568

简单的，你可以尝试这样的事（ 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>

来源

2014-04-27 00:27:36

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

回答

相关问题