如何在多個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元素之間添加垂直線

回答

相關問題