爲什麼我所有的「商店」列表元素都不是正確的？

我有一個列表，我想「排序」到兩列。我通過添加兩個類並將這些左右移動來做到這一點。爲什麼我所有的「商店」列表元素都不是正確的？

但由於某種原因，並非所有應該在右側的元素都是正確的。 See my fiddle。

在此列表中，沒有store列表項，只有brand項。但仍然有一個品牌項目左轉。這是爲什麼？

該列表是jQuery自動完成的結果，所以我無法改變列表的創建方式。 I've tried :)

// HTML 
<ul class="ui-autocomplete main-search"> 
    <li class="ui-autocomplete-category store"> 
     <h3>Stores</h3> 
     <div class="no-match"> No matches found</div> 
    </li> 
    <li class="ui-autocomplete-category brand"> 
     <h3>Brands</h3> 
    </li> 
    <li class="brand ui-menu-item" role="presentation"> 
     <a href="#" class="ui-corner-all">BARRATS</a> 
    </li> 
    <li class="brand ui-menu-item" role="presentation"> 
     <a href="#" class="ui-corner-all" >Barrie</a> 
    </li> 
    <li class="brand ui-menu-item" role="presentation"> 
     <a href="#" id="ui-id-5" class="ui-corner-all" >Barrio Santo</a> 
    </li> 
</ul> 

// CSS 
ul { width: 500px; } 
li { width: 250px; } 
li.store { float: left; } 
li.brand { float: right;}

來源

2014-07-18 Steven

_「但還是一個品牌項目向左浮動。這是爲什麼？「 - 因爲有足夠的空間存放」Stores：No matches found「下面的元素LI ......這就是浮動的工作方式。 – CBroe

你要清楚浮動：

li.brand { float: right;clear:right;/*Add clear:right*/} 
li.store { float: left;clear:left/*Add clear left*/}

fiddle

來源

2014-07-18 12:38:54

當剩下浮動元素時會發生什麼？我想你會看到「步驟」 – Morpheus

檢查更新的答案。清除也浮動。 –

http://jsfiddle.net/g66zX/5/ – Morpheus

爲什麼我所有的「商店」列表元素都不是正確的？

回答

相關問題