显示多列中的列表项并限制行数

Question

i'm developing a php project in which i'm getting the list from the database and i need to display this data in html in 3 columns and 10 rows and add a button "more" in the end

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

I want it to be displayed as-

item1 item2 item3

item4 item5 item6

.

.

.

.

Maximum 10 rows

last row will be

item item "more" - only if there are more items in the list

"more" is just a link which will take me to some other page

Thanks for any help.

Answer 1

Add display:inline to li and use pseudo class to break it

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

Script (To display more link)

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

This enables the more link after 6 list items, you can change the count in the script.

Note: Reduce the list items to check the effect

DEMO UPDATED