Question

我有HTML内容，可以生成包含UL的动态数量的span元素。由于跨度如何＆amp;生成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;
}

输出不是我想要的，但是span元素向左浮动到UL，但是我希望它们向左浮动到前一个span元素，并且将与float float相关联的UL留给前一个UL。

因此形成如下：

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

但正如我所说，每个跨度和UL对都是按顺序创建的。

任何想法如何实现我的愿望？

Answer 1

这是你想要的效果吗？

http://jsfiddle.net/meEMp/

将动态跨距数与UL并排对齐

1 个答案: