-1

我li在 for 循环中使它现在以狭窄的顺序出现 20 里。

<ul>
    <?php for($i=1;$i<=20;$i++) { ?>
        <li>
            <?php echo $i;?>
        </li>
    <?php } ?>
</ul>

我想将其拆分为每列中的 5 个列表之类的列

1   6   11   16
2   7   12   17
3   8   13   18
4   9   14   19
5   10  15   20

我该怎么做才能拆分。任何建议都会很棒。

提前致谢。

4

6 回答 6

5

我不确定你是否可以用一个列表来做到这一点。<ul>您可以为每个块创建一个新的：

$data = range(1, 20);
$lists = array_chunk($data, 5);

foreach ($lists as $list) {
  echo '<ul>';
  echo '<li>' . implode('</li><li>', $list) . '</li>';
  echo '</ul>';
}

然后只是浮动<ul>元素：

ul {
  float: left;
}
于 2013-10-16T11:02:12.950 回答
1

这是我的示例代码。但是您的方式请求对 ul 标签无效

<?php 

for($i=1;$i<=20;$i++) { ?>
    <?php if($i==1) { ?>
    <ul style="float:left">
    <?php } ?>      

    <li>
        <?php echo $i;?>
    </li>

    <?php if($i%5 == 0) { ?>
    </ul>
    <?php if($i != 20)  {?>
        <ul style="float:left">
    <?php } ?>      

    <?php } ?>      
<?php } ?>
于 2013-10-16T11:03:10.960 回答
1

我认为检测第五个元素会是问题吗？

<ul>
   <?php for($i=1;$i<=20;$i++) { ?>
       <li>
           <?php echo $i;?>
       </li>
  <?php
if($i % 5 == 0)
{echo "This is the end of the row";} 
} ?>

然后，您可以使用 CSS 进行格式化。

于 2013-10-16T10:58:53.090 回答
1

只需检查模数$i % 5; 如果为零，则结束当前列表并打开一个新列表：

echo '<ul>';
for( $i = 1; $i <= 20; $i++ )
{
    echo '<li>';
    echo $i;
    echo '</li>';
    if( $i % 5 == 0 )
    {
        echo '</ul><ul>';
    }
}
echo '</ul>';

然后为您的列表设置样式以并排浮动。

于 2013-10-16T11:01:12.303 回答
1 
<table>
<?php for($i=1;$i<=20;$i+=5) { ?>
    <tr>
    <?php for($j=0;$j<5;$j++) { ?>
        <td>
            <?php echo $i+$j;?>
        </td>
    <?php } ?>
    </tr>
<?php } ?>
</table>
于 2013-10-16T11:01:30.343 回答
1

这可以仅使用纯 css 来实现，为 ul 的父级设置一个固定宽度，例如 450，然后给每个 li 100px 的宽度和一个浮点数，您可以在 jquery ui 页面中看到一个示例，请参阅链接http:// /jqueryui.com/sortable/#display-grid

<ul id="sortable" class="ui-sortable">

<li class="ui-state-default">2</li><li class="ui-state-default" style="">1</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>

然后看款式，

#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 496px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
于 2013-10-16T11:08:02.237 回答