スパンのダイナミックな数をULに並べて並べると

Question

ULの付随するスパン要素の動的数を生成するHTMLコンテンツがあります。 スパンの& ULがどのように生成されるかによって、それらは設定された順序で書き込まれます。

私が達成しようとしているのは、各スパンがトップを横切り、その下に付随するULを持つことです。ここで

は、HTMLのセグメントである：

<div id="suggested" >     
    [% FOR row IN suggestions %] 
    [% "<span>" row.0 "</span><div class="clear"></div><ul>" "" IF loop.first %] 
    [% FOR u in row %] 
    [% IF loop.index > 0 %] 
    <li><a name="sugg" href='[% script_name %]/register?key=[% u %]' value="[% u %]">[% u %]</a> 
     [% END %] 
     [% "</ul>" IF loop.last %]        
     [% END %] 
      [% END %] 
      </div> 

とCSS：

#suggested 
{ 
    width:100%; 
    height: 400px; 
    display: block; 

} 

.clear { 
clear:both; 
} 

#suggested ul 
{ 
    display:inline-block; 
    width: 20%; 
    list-style: none; 
    float:left; 
    margin: 0 4px; 
    padding: 0; 
    text-align:left; 
    overflow: hidden; 

} 
#suggested span { 

    width: 20%; 
    border-bottom: 1px #000 dotted; 
    display:inline-block; 

} 
#suggested ul li:nth-child(2n+1) { 
    background: #eee; 
} 

#suggested ul li 
{ 

    width: 100%; 
    margin: 5px 0; 
    padding: 2px; 
    text-align:left; 
    text-overflow: ellipsis; 
    display: table; 
    word-wrap: normal; 
} 

出力は私が望むものではありませんが、代わりにスパン要素は、ULに左のフロートが、私はしたいですそれらを前のスパン要素の左に浮動させ、スパンに関連付けられたULを前のULに残したままにします。

したがってのようなものを形成：

<span><span><span><span><span> 
<ul> <ul> <ul> <ul> <ul> 

をしかし、私が言ってきたように、各スパンとULのペアが順番に作成されます。

どのように私は私が望むものを達成することができますか？

Answer 1

これはあなたが行っている効果ですか？

http://jsfiddle.net/meEMp/