Question

我正在使用css flex来呈现一个简单的ul＆gt; li * 7列表。我希望元素之间的空间相等：我将父对齐内容设置为空格 -

然而，这两个第一个元素是没有文字的图标，所以我希望它们留在最左边。在空格之间，第一个默认位于最左侧，这没关系。我怎样才能把第二个放在左边，在其他人之间保持相等的空间？

代码：

<ul>
    <li class="left"></li>
    <li class="left"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<style rel="stylesheet">
    ul {
        display:flex;
        justify-content: space-between;
    }
    .left {
        something to make elements stick on left;
    }
</style>

Answer 1

不确定这是否对您有用，但您可以尝试使用justify-content: flex-start;，然后提供不在左侧<li>的所有margin: auto;。

＆＃13;

ul {
    display:flex;
    justify-content: flex-start;
}
li:not(.left) {
    margin: auto;
}

＆＃13;

<ul>
    <li class="left"></li>
    <li class="left"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

＆＃13;

css flexbox：除了前两个ul＆gt; li * 7列表之外的元素之间的空格相等

1 个答案: