根據使用CSS的包含列表項的數量，我可以設計一個列表視圖嗎？

我的頁面上有一些listviews。根據使用CSS的包含列表項的數量，我可以設計一個列表視圖嗎？

有些包含單個列表項目，有些包含多個項目。我正在尋找一種設置頂部/底部邊框的方法，具體取決於CSS中唯一列表項的數量。

因此，在一個單一的項目列表，邊框應該是：

listitem > border-top & border-bottom

兩個項目列出

listitem > border-top 
listitem > border-top & border-bottom

三+項目列表

listitem > border-top 
listitem > border-top & border-bottom 
listitem > border-bottom

現在我有這個CSS

.inputList li:not(.inputList li:first-child, .inputList li:last-child) { 
    border-top-width: 1px; 
    border-bottom-width: 1px; 
    } 
.inputList li:first-child { 
    border-bottom-width: 1px; 
    } 
.inputList li:last-child { 
    border-top-width: 1px; 
    }

但這不走我很遠，我使用not:我寧願儘量避免（因缺乏支持IE）

任何想法，如果這是在所有可能的？

謝謝！

來源

2012-08-03 frequent

您的'：not（）'語法無效CSS，但在jQuery中有效。見[這個問題]（http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css）。 – BoltClock 2012-08-03 10:13:52

謝謝。我想知道我在做什麼... – frequent 2012-08-03 10:15:01

@BoltClock：http://www.quirksmode.org/css/not.html – frequent 2012-08-03 13:38:36

所有你需要的是

.inputList li:first-child { 
    border-top: 1px solid black; 
} 
.inputList li { 
    border-bottom: 1px solid black; 
}

與你將永遠有在頂部邊框和底部以及兩者之間的邊界。

來源

2012-08-03 10:11:59 Horen

但如何分配邊界頂部/底部列出項目「之間」？正在嘗試... – frequent 2012-08-03 10:12:53

難道你只需要一個邊界之間？在你的兩個列表示例中，在第一個li之後你將有雙重邊框。這不是你想要的嗎？ http://jsfiddle.net/CBGcE/ – Horen 2012-08-03 10:15:45

是的。究竟。我必須有另一種風格設置虛假的邊界。感謝幫助！ – frequent 2012-08-03 10:16:58

根據使用CSS的包含列表項的數量，我可以設計一個列表視圖嗎？

回答

相關問題