동적 인 수의 스팬을 동반 한 UL의 나란히 정렬하여

Question

동반하는 UL과 함께 스팬 요소의 동적 수를 생성하는 HTML 콘텐츠가 있습니다. 범위가 &의 UL이 어떻게 생성 되었기 때문에 정해진 순서로 작성됩니다.

달성하려는 목표는 각 스팬이 상단을 가로 질러 그 다음에 동봉 된 UL이있는 것입니다.

<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 왼쪽 float를하지만, 내가 원하는 여기

는 HTML의 세그먼트 그것들을 이전 스팬 요소로 왼쪽으로 떠서 스팬과 관련된 UL을 이전 UL에 남겨 놓습니다.

따라서 같은 성형 :

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

을하지만, 내가 말했듯이, 각각의 범위 및 UL 쌍은 순서대로 만들어집니다.

원하는 아이디어를 얻는 방법에 대한 아이디어가 있습니까?

Answer 1

당신이 가고있는 효과입니까?

http://jsfiddle.net/meEMp/