html - 无法让 li 项占用 ul 内的所有空间

Question

提供了以下 jsfiddle:http://jsfiddle.net/rPJ49/1/

我正在尝试让 ul-list 中的所有 li-items 占用 % 的空间，以便最终它们占用所有空间。每个 li-item 之间应该有 .xx% 的边距，除了最后一个 child 。

那么这个例子有什么问题呢？如果水平调整面板大小，您会看到最右边的 1px(?) 未填充。

参见(坏):

见(好):

所有元素都有 % 宽度，请参阅:

.items li
{
    display: inline-block;
    margin-right: .25%;
    text-transform: uppercase;
    width: 16.41666666666667%;
}

.items li:last-child
{
    margin-right: 0%;
    width: 16.66666666666667%;
}


Which would lead to: 
5 * 16,41666666666667  = 82,08333333333335%
5 * .25%               = 1.25%
1 * 16,66666666666667  = 16,66666666666667%
Adding them
100%

关于如何解决或找到更好的方法来创建高度为 100% 且宽度为 100%(带边距)的多​​行 li 的任何想法？

Answer 1

技巧，我从神奇的Harry Roberts中学到的，就是在容器上使用display:table，在列表项上使用display:table-cell。表格单元格拉伸(stretch)占据容器的整个宽度，具体取决于容器的数量。

他的原始演示在元素之间没有边距，但我已经 fork 它并制作了一个带有边距的新版本:

http://jsfiddle.net/zfSt4/400/