Question

以下是我能够完成的任务：http://jsfiddle.net/mf2y745b/3/

问题是底部项目似乎比其他项目有更高的空间。为什么？还有什么我可以做的，以确保项目之间的空间总是相等，无论ul元素的高度是多少，第一个项目接触顶部，最后一个元素接触底部？

HTML：

<ul>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
    <li>00000000000</li>
</ul>

CSS：

ul {
    list-style: none;
    height: 800px;
    border: 1px solid red;
    display: table;
    position: relative;
    padding: 0;
    margin: 0;
}

ul li {
    display: table-row;
    margin: 0;
}

ul li:last-child {
    display: block;
    position: absolute;
    bottom: 0;
}

更新

我刚试过CSS flex box。但是第一个元素再次触及顶部，最后一个元素不触及底部。

以下是演示：http://jsfiddle.net/mf2y745b/9/

CSS：

ul {
    list-style: none;
    height: 800px;
    border: 1px solid red;
    display: table;
    position: relative;
    padding: 0;
    margin: 0;
    display: flex;
    margin: 0;
    flex-flow: column;
    justify-content: space-around;
}

ul li {
    margin: 0;
}

ul li:last-child {
    display: block;
    bottom: 0;
    padding: 0;
}

顺便说一句，我宁愿找到一个不使用Flexbox的解决方案。这只是为了表明我已经尝试过使用Flexbox。它可能对某人有用。

Answer 1

你不需要不必要的css＆＃39;技巧＆＃39;。

这个简单适用于你：

ul {
    list-style: none;
    border: 1px solid green;
    padding: 0;
    margin: 0;
}

ul li {
    /*
     * the gap you need between items
     */
    margin-bottom: 30px; 
}

ul li:last-child {
    margin-bottom: 0;
}

http://jsfiddle.net/mf2y745b/7/

列出元素项目调整到ul高度

1 个答案: