如何动态显示具有固定列数的列表？答案

【问题标题】：How to display a list horizontally with fixed number of columns dynamically?如何动态显示具有固定列数的列表？
【发布时间】：2015-04-24 12:24:21
【问题描述】：

我正在尝试用 3 列水平显示列表，如果列被填满，它会自动换行。我正在尝试使用 php 对其进行编码，但没有得到任何结果。所以，请如果有人可以提供一些方法来使它成为可能。我附上快照：Image Snapshot

  <li class="dropdown menu-item">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Electronics</a>
            <ul class="dropdown-menu mega-menu" >
                                    <li class="yamm-content" >
                    <div class="row" >
                        <div class="col-md-4" >
                            <ul class="list-unstyled" >
                                    <table>
                                        ?php  
                                            $cnt=0;

                                            while($cnt>0)
                                            {
                                                if($cnt==0)
                                                {   
                                                     ?>
                                                <tr>
                                                <?php } ?>
                                                    <td>
                                                        li><a href="#" style="font-weight:bold">Laptops And its accesories</a>&#9658

                                                      <ul >
                                                         <li><a href="#">HDD</a></li>
                                                         <li><a href="#">DVD Player</a></li>
                                                         <li><a href="#">Motherboard    </a></li>
                                                         <li><a href="#">Mouse and Keyboards</a></li>
                                                         <li><a href="#">Headphone</a></li>
                                                         <li><a href="#">Printers</a></li>
                                                         <li><a href="#">Data Cards </a></li>

                                                    </ul>



                                                                        </li>
                                                                    </td>
                                                                    <?php

                                                            $cnt=$cnt+1;

                                                            if($cnt>2)
                                                            {
                                                                $cnt=0;

                                                            }                                                                       
                                                         ?>
                                                </tr>

                                                </table>




                                         </ul>
                        </div>
                        <div class="col-md-4">
                            <ul class="list-unstyled">


                            </ul>
                        </div>
                        <div class="col-md-4">
                            <ul class="list-unstyled">




                            </ul>


                        </div>




                    </div>
                </li>

            </ul>
        </li>

【问题讨论】：

如果你不能帮助别人，请至少不要对我的问题投反对票。谢谢。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

你可以有两个这样的循环

for(;$i<$total;)
new row
for($j=0;$j<3;$j++)
$i++
display content

【讨论】：

【解决方案2】：

在 PHP 中，使用“模”，如下所示：

<table>
  <tr>
<?php
$i = 0;
foreach($menu as $item) {
  if($i % 3 == 0) {
     // This will be executed 1 in 3 times.
     echo "</tr><tr>";
  }
  echo "<td>".$item."</td>"
}
?>
  </tr>
</table>

只是一个例子，这里生成的 HTML 不一定适合你的代码。

你可以改用 CSS ！

<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
  <li>Menu 6</li>
</ul>

<style>
  li {
    display: inline-block;
    width: 33%;
    list-style: none;
  }
</style>

【讨论】：

先生，我已经编辑了我的问题，您的回答似乎很简单，但我很困惑如何在我的代码中添加它。

【解决方案3】：

1。垂直列

如果您不介意IE9< compatability，您可以为此使用 CSS 列

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
}

<ul>
    <li>column item 1</li>
    <li>column item 2</li>
    <li>column item 3</li>
    <li>column item 4</li>
    <li>column item 5</li>
    <li>column item 6</li>
    <li>column item 7</li>
    <li>column item 8</li>
    <li>column item 9</li>
</ul>

2。横向排序

如果您希望块以水平顺序显示，从技术上讲，这不是列的问题，但可以使用以下方法实现：

body {
  margin: 0;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 32%;
}

<ul>
  <li>column item 1</li>
  <li>column item 2</li>
  <li>column item 3</li>
  <li>column item 4</li>
  <li>column item 5</li>
  <li>column item 6</li>
  <li>column item 7</li>
  <li>column item 8</li>
  <li>column item 9</li>
</ul>

【讨论】：

先生，您的代码有效，但输出有些奇怪，我也发布了我正在尝试实现它的代码。所以，如果你能基于此提出建议，先生将非常有帮助。