如何漂浮3个李的左侧和3个右侧并保持原始序列？

Question

我有6个列表项的列表。每件产品的宽度仅为总UL的5％。 我试图让剩余的60％的空白空间出现在第3项后面。

我尝试了浮动项目4,5 & 6右侧。但是这会导致它们出现乱序。他们倒退为6,0 & 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; } 

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