Question

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

我试图让ul-list中的所有li-items占用一定的空间，以便最终占用所有空间。在每个项目之间应该有.xx％的余量，期望最后一个孩子。

这个例子有什么问题？如果你水平调整面板大小，你会看到最右边没有填充1px（？）。

看（坏）： enter image description here

见（好）： enter image description here

所有项目的宽度均为％，请参阅：

.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。表格单元格拉伸占据容器的整个宽度，具体取决于容器的数量。

他原来的演示版没有在这两个项目之间留有余量，但是我已经将它分叉并制作了一个带边距的新版本：

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

Answer 2

我终于找到了解决方案......

这是你的新（更简单）结构：

<div class="items">
    <ul>
        <li>
            <div class="element">
                <a href="javascript:void(0);" class="mini">Mini's</a>
            </div>
        </li>
        <!-- ... -->
    </ul>
</div>

CSS：

.items
{
    border: 3px solid rgba(235, 235, 235, 0.6);
}

.items ul
{
    width: 100%;
    display: table;            /* consider your list as a table */
    table-layout: fixed;       /* fix equal width on every column */
}

.items li
{
    display: table-cell;       /* consider your element as a table cell */
    text-transform: uppercase;
}

.items li + li
{
    padding-left: 3px;         /* add the transparent space between elements */
}

.items li .element
{
    display: table;            /* use the multiline trick */
    float: left;               /* IMPORTANT : avoid crasy margins */
    height: 40px;
    width: 100%;
    background: rgba(235, 235, 235, 0.6);
}

.items li .element a
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: 'nexa_lightregular';
    color: #000;
    text-decoration: none;
    font-size: 60%;
}

Updated JSFiddle

编辑I：

似乎浏览器存在百分比计算问题（有关详细信息，请参阅here）这是一种解决方法：在最后一个元素的右侧添加一个像素box-shadow以隐藏这个额外的像素边距：

.items li:last-child
{
    box-shadow: 1px 0 rgba(235, 235, 235, 0.6);
}

编辑II：

最后，这不是一个好主意x）即使没有额外的像素，你也会有这个额外的box-shadow，并且它将是可见的（因为你的半透明背景）。

相反，在宽度上播放以删除额外的像素：

.items {
    width: 90.05%; /* instead of 90% */
}

Updated JSFiddle

Answer 3

这将使你的最后一个li保持正确的边距，并且更多支持使用：last-child 我没有测试过这个，但我个人使用这个方法

.items li
{
   /* apply general styles + float : right */
}

.items li + li
{
   /* apply your margin-right + float : inherit */
}

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

3 个答案:

编辑I：

编辑II：