如何动态地水平显示列数固定的列表

Question

我试图水平显示一个包含3列的列表，如果列被填满，它会自动进入新行。我正在尝试使用php进行编码，但没有得到任何结果。所以，如果有人能提供一些方法使它成为可能，请。我正在附加快照：图像快照

<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>

Answer 1

您可以有两个类似的循环

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

Answer 2

在PHP中，使用"modulo"，如下所示：

<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>

Answer 3

1。垂直列

如果你不介意IE9<兼容性，您可以为此使用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>