刪除第二行水平列表項上的邊框

我有一個奇怪的查詢。刪除第二行水平列表項上的邊框

我的使用邊界來模擬「管」分離器鏈接，可以拆分爲兩行水平列表 - 見http://jsfiddle.net/gfkPG/162/

我想第二行的第一個項目沒有一個「管' 分隔器。也就是說，我想要這個效果： enter image description here

我不知道每個鏈接的長度是多少，我也不知道會有多少鏈接，或者我是否有足夠多的鏈接首先是一條線。所以我不能隨便在一個特定的項目上設置一個班級。

我不能將圖像放在左邊項目的邊框上，因爲我的背景顏色不總是白色的 - 有時候是彩色漸變。

有沒有辦法在純CSS中做到這一點？如果沒有，是否有Javascript解決方案？

我聽說過CSS剪輯屬性，但我被告知它不適用於舊瀏覽器（並且我的解決方案需要支持IE7 +）。我很難找到替代品。

在此先感謝。

來源

2012-01-05 Jimmy Breck-McKye

這很麻煩，但這可能工作。

HTML

<div id="menu"> 
    <ul class="list"> 
    <li>This is a list item</li> 
    <li>This is a list item</li> 
    <li>This is a list item</li> 
    <li>This is a list item</li> 
    </ul> 
</div>

CSS

.menu{overflow:hidden;} 
ul#list{margin-left:-1px;} 
ul#list li{border-left:solid 1px;}

來源

2012-01-05 18:21:45 m4rk

爲什麼這是一個被接受的答案？這並沒有解決問題，文字換行到第二行，並在IE7中形成第二個邊框。 – 2012-10-31 20:37:28

如果你知道物品有多寬，我不清楚。如果你知道每行總是有三個（或者其他），你可以使用nth-child selector。

來源

2012-01-05 18:19:53 Tom

我不會知識項目範圍很寬（文本在不同情況下會有所不同），不包括 - 僅限訂單。 – 2012-01-05 19:35:54

看到這個的jsfiddle：http://jsfiddle.net/gfkPG/163/

風格LI標記，使其具有邊界：無

來源

2012-01-05 18:24:36 jacktheripper

這不適用於我 - 我不知道項目的數量，或他們的長度。因此，我不能任意將「無邊界」類應用於某個特定的元素。請參閱http://jsfiddle.net/7WgsA/1/ – 2012-01-05 19:38:35

我建議使用JavaScript然後 – jacktheripper 2012-01-05 19:39:23

刪除第二行水平列表項上的邊框

回答

相關問題