添加內部邊框但不是外部的

我有一個方形圖像的網格。
我想提出一個邊界上的每一項內部而不是對整個盒子的外面，如下圖所示：添加內部邊框但不是外部的

enter image description here

這裏的HTML設置。

<div class="grid-wrapper"> 
    <ul> 
     <li><img src="[image url]" /></li> 
    </ul> 
</div>

而CSS

.grid-wrapper { 
    margin: 0 auto; 
} 
.grid-wrapper ul { 
    list-style: none; 
    display: block; 
} 
.grid-wrapper ul li { 
    padding: 5px; 
    border: 1px solid #F1F1F1; 
}

我試圖把邊境一路輪每個li元素，然後加在grid-wrapper白色邊框把它在外部邊界，但那沒用。

我怎樣才能得到這個無需手動設置每個人的border-left/border-bottom等廣場被動態地從數據庫中抽取所以每一個不具有特定的階級，他們都是相同的。

UPDATE

網格是流體。當您將瀏覽器窗口拉開時，它會向頂部行添加更多（如果有空間的話），而當您向內拉動瀏覽器窗口時會增加更多。沒有固定數量的圖標。

來源

2013-11-20 Dan Hanly

請包括您的嘗試和什麼具體沒有工作。 – showdev

請向我們展示您的CSS – George

@showdev正如我所提到的，我嘗試在li元素周圍放置邊框，然後在網格包裝器周圍添加一個白色邊框。我會澄清一下：圍繞網格包裝的邊框沒有出現在頂部，而是出現在每個內部元素邊界旁邊。 –

當底部有一排不齊的行時，您沒有指定想要發生什麼，所以我不確定這是否完全滿足您的要求，但此示例可能會完成您所需的操作。

http://jsfiddle.net/52LRd/

它的工作原理是在底部設置一個邊界，並各自留下每一個元素，那麼通過什麼改變包裝1px的並留在車內的UL，使得這些邊緣不可見。

.grid-wrapper { 
    float: left; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid-wrapper ul { 
    list-style: none; 
    display: block; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    top: 1px; 
    right: 1px; 
} 
.grid-wrapper ul li { 
    float: left; 
    padding: 10px; 
    border-bottom: 1px solid #F1F1F1; 
    border-left: 1px solid #F1F1F1; 
}

這讓你出去不必揣摩哪些列表項目是頂行，底行，左欄和右欄中，這將需要的JavaScript中。

來源

2013-11-20 19:46:43 Nate

完美！謝謝。我希望只有CSS和HTML的解決方案。 JS很好，但對於這樣的小事，我不想走這條路。 –

絕對。如果這符合您的需求，它會讓事情變得更簡單。 – Nate

添加內部邊框但不是外部的

回答

相關問題