我正在开发一个PHP项目，其中我从数据库中获取列表，我需要在HTML中显示此数据3列10行，并在末尾添加一个按钮"more"
<?php foreach ($items as $item) { ?>
<ul>
<li><a href="<?php echo $item['href']; ?>" >
<?php echo $item['name']; ?></a></li>
</ul>
<?php } ?>
我希望它显示为-
item1 item2 item3
item5 item6
.
.
.
.
最多10行
最后一行为
item item "more" -仅当列表中有更多项时
"more"只是一个链接，它会把我带到另一个页面
谢谢你的帮助
将display:inline添加到li中，并使用伪类将其断开
ul{
margin:0
}
li{
display:inline
}
li:nth-child(3n):after {
content:"'A";
white-space:pre;
}
脚本(显示更多链接)
$('#moreli').toggle($("li").size() > 6);
这将在6个列表项之后启用更多链接，您可以在脚本中更改计数。
注释:减少列表项检查效果
演示更新
<style>
.row {
width:100%;
float:left;
}
.item {
width:100px;
float:left;
}
</style>
<?php
//*** your array of items
$items = array("item1", "item2", "item3", "item4","item5", "item6", "item7", "item8", "item9", "item10");
$numItems = sizeof($items);
//*** max number of rows
$maxRows = 10;
$maxItems = 3 * $maxRows;
echo '<div class="row">';
for ($i=0; $i<$numItems;$i++) {
echo '<div class="item">'.$items[$i].'</div>';
if (($i+1) % 3 == 0) {
//*** if divisible by 3, close row
echo '</div><div class="row">';
}
if ($i == $numItems) {
//*** last item reached, close div
echo '</div>';
}
if ($i+1 >= $maxItems ) {
//*** max 10 row, add more button.
echo '</div><input type="submit" value="Add More">';
return;
}
}
?>
试着用这个:
<?php
$count=0;
foreach ($items as $item) { ?>
<ul class="col3">
<li>
<?php if($count > 9) { ?>
<a href="#">More</a></li></ul>
<?php break;
} else{ ?>
<a href="<?php echo $item['href']; ?>" >
<?php echo $item['name'];
$count=$count+1;
?></a>
<?php } ?>
</li>
</ul>
<?php } ?>
和下面的CSS
.col3
{
margin-left:-3%;
}
.cols3 li
{
width:30%;
margin-left:3%;
display:inline-block;
vertical-align:top;
}
.cols3 li a
{
display:block;
}