多列顯示列表項並限制行數

我正在開發一個php項目，其中我從數據庫中獲取列表，並且需要在3列和10行的html中顯示此數據並添加一鍵到底多列顯示列表項並限制行數

<?php foreach ($items as $item) { ?> 
     <ul> 
      <li><a href="<?php echo $item['href']; ?>" > 
      <?php echo $item['name']; ?></a></li> 
     </ul> 
     <?php } ?>

「更」我希望它可以顯示原樣

物品1 ITEM2項目3

ITEM4 ITEM5 ITEM6

。

最大10行

最後一行將

項項「更多」 - 只要有列表

多個項目「多」只是一個將帶我去鏈接其他頁面

感謝您的任何幫助。

來源

2013-03-14 Razor

爲什麼你不使用表？ – 2013-03-14 07:03:24

我也認爲最好的解決方案將是使用表... – alwaysLearn 2013-03-14 07:09:30

我曾嘗試使用表，不能限制行！ – Razor 2013-03-14 10:45:43

添加display:inline李和使用僞類來打破它

ul{ 
    margin:0 
} 
li{ 
    display:inline 
} 
li:nth-child(3n):after { 
content:"\A"; 
white-space:pre; 
}

腳本（要顯示更多的鏈接）

$('#moreli').toggle($("li").size() > 6);

這使得後6列表中的項目，可以將更多的鏈接更改腳本中的計數。

注意：縮小清單項目檢查效果

DEMO UPDATED

來源

2013-03-14 07:05:11 Sowmya

謝謝..它很好用！但你能幫我用「更多」按鈕嗎？我不希望它顯示項目較少時顯示。 – Razor 2013-03-14 10:48:05

@ user2168548檢查更新的答案 – Sowmya 2013-03-14 11:48:40

非常感謝:)其偉大的:) – Razor 2013-03-14 13:44:46

<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; 
     } 
    } 
?>

來源

2013-03-14 07:27:03 Mupps

該方法看起來不錯..但你能告訴我如何使用這個？ – Razor 2013-03-14 10:59:12

嘗試使用此：

<?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; 
}

來源

2013-03-14 07:45:39

非常感謝，它只顯示一列，我需要它在3列。 – Razor 2013-03-14 10:49:20

多列顯示列表項並限制行數

回答

相關問題