我想要一個薄的透明div行分隔符。如何在CSS/html中做到這一點？

Question

基本上我想要一個類似於在stackoverflow上分隔帖子的行，只有我希望它垂直並且是一種「左邊界」，它將在單獨的div中顯示鏈接和內容。因此，我不想在鏈接和文本的左側製作一個大的矩形，而只是想要一個非常細的，細微的灰色線條，一直沿着頁面向下。

我該怎麼做呢？

Answer 1

你可以做

.some-class 
{ 
    border-left:1px solid #e2e2e2; 
} 

Answer 2

這是我用用：

HTML：

<div class="vertical-line"></div> 

CSS：

.vertical-line { 
    width: 1px; 
    height: 300px; 
    background-color: #696969; 
    margin: 0 auto; 
} 

然後，您可以修改此.vertical-line屬性來自定義此垂直線的顏色，屬性和高度設計。

Answer 3

檢查在本頁面的CSS，我可以看到，這是所使用的CSS：

border-bottom: 1px solid #cccccc; 

你可以做這樣的事情：

border-right: 1px solid #cccccc, 
widht: 1px; 
height: //depends on how tall you want it 

Answer 4

.thin_border { 
    border-left: 1px solid rgba(0, 0, 0, 0.3); 
} 
#mydiv { 
    height: 100%; 
} 

這將是一個半元素左側的透明邊框。

高度取決於父元素的高度。

HTML：

<div id="mydiv" class="thin_border"> 
content 
</div>