如何漂浮3個李的左側和3個右側並保持原始序列？

我有6個列表項的列表。每件產品的寬度僅爲總UL的5％。我試圖讓剩餘的60％的空白空間出現在第3項後面。如何漂浮3個李的左側和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}

來源

2015-11-07 TopTomato

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/

來源

2015-11-07 19:37:21

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

來源

2015-11-07 19:38:08

如何漂浮3個李的左側和3個右側並保持原始序列？

回答

相關問題