html - 如何在左侧 float 3个LI，在右侧 float 3个LI，并保持原始顺序？

我有6个清单项目的清单。每个项目的宽度仅占总UL的5％。
我试图让剩余的60％的空白空间出现在第3项之后。

我试图将项目4,5和6浮动到右侧。但这导致它们出现顺序混乱。它们显示为6,5和4。

我怎样才能达到预期的效果？这是简化版本。不能将项目3设置为65％的宽度！

目标：
1,2,3 60％的空白空间4,5,6

<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>

<li class="b">4</li>
<li class="b">5</li>
<li class="b">6</li>
</ul>

如前所述，以下CSS不起作用

ul#six-items {
list-style-type:none;
width:100%;
}

li {
width:5%;
}

li.a {float:left}

li.b {float:right}

最佳答案

的HTML

<ul>
    <li class="a">1</li>
    <li class="a">2</li>
    <li class="a">3</li>
    <li class="b b4">4</li>
    <li class="b">5</li>
    <li class="b">6</li>
</ul>

的CSS

ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
}

li { width: 5%; }

li.b4 { margin-left: auto; }

演示：http://jsfiddle.net/y8y2edb6/

关于html - 如何在左侧 float 3个LI，在右侧 float 3个LI，并保持原始顺序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33586816/