添加内部边框但不是外部边框

Question

我有一个正方形图像网格 我想在每个内部放置一个边框，但不要在整个框的外侧，如下图所示：

这是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等的情况下获得此结果。方块是从数据库中动态提取的，因此每个方块都没有特定的类，它们都是相同的

更新

网格是流动的。当您打开浏览器窗口时，它会向顶行添加更多内容（如果有空间），向内拉动浏览器窗口时会增加更多内容。没有固定数量的图标。

Answer 1

当底部有一条不规则的行时，你没有指明你想要发生什么，所以我不确定这是否完全符合你的要求，但是这个例子可以完成你所需要的。

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。