在網頁中經常會出現左右比對的場景，比如商品列表頁顯示多個商品時，往往會采用左右對齊的樣式。同時，這些商品之間可能會有連線，以突出它們的相關性。通過CSS的技巧，我們可以輕松實現這樣的效果。

首先，我們需要利用CSS中的float屬性將元素左右對齊。以商品列表為例，我們可以使用以下代碼實現：

.item {
float: left;
}

以上代碼就可以將所有類名為item的元素向左浮動，從而實現左右比對的效果。

接下來，我們需要在相鄰元素之間添加連線。為此，我們可以利用CSS中的border屬性設置元素的邊框。

.item {
float: left;
border-right: 1px solid #333333;
}

代碼中，border-right屬性可以為元素右側添加一條1像素寬、顏色為#333333的實線。如此一來，相鄰元素之間就會有連線了。

如果想要設置不同顏色的連線，可以通過給每個元素設置不同的邊框顏色來實現：

.item:nth-child(odd) {
border-right: 1px solid #333333;
}
.item:nth-child(even) {
border-right: 1px solid #999999;
}

以上代碼中，:nth-child選擇器用于選擇第奇數/偶數個元素，并分別為其設置不同顏色的邊框。

最后，我們還可以利用display: flex和justify-content: space-between屬性將元素水平對齊，并自動填充間距。代碼如下所示：

.container {
display: flex;
justify-content: space-between;
}
.item {
border-right: 1px solid #333333;
}

以上代碼中，.container元素用于包裹所有.item元素，使它們能夠一行顯示。而justify-content: space-between屬性則可以讓它們平均分布到容器兩側，并且自動填充間距。