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

Question

我有一个包含 6 个列表项的列表。每个项目的宽度仅为总 UL 的 5%。我正在尝试让剩余的 60% 空 space 出现在第 3 项之后。

我尝试将项目 4,5 和 6 向右浮动。但这会导致它们出现顺序错误。它们向后显示为 6,5 和 4。

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

目标： 1,2,3 60% 空 space 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/

Answer 2

使用 float...你不能。

您可以将菜单拆分为两个单独的菜单并独立浮动（一个向左，另一个向右）。或者您可以使用 flexbox

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

li {
width:5%;
  border:1px solid green;
} 

li:nth-child(4) {
  margin-left: auto;
}

<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>

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

How to float 3 LI's to the left and 3 to the right and maintain original sequence?

html

css

flexbox