html - 如何将 3 个 LI 向左浮动，3 个向右浮动并保持原始顺序？

Question

我有一个包含 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}

Answer 1

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/