CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
Jonas Bolin
Jonas Bolin

Reputation: 616

New row for horizontal unordered list

I'm trying to build a calendar in javascript which displays 5 weeks from any given date.

I have generated an unordered list with 35 days in it. Is there any way to get css to do a metaphorical<br> after every 7th item, so that the weeks stack up on top of each other. I have been looking at nth-child but haven't found how to make it create a new row.

Yes, this can be done with a simple javascript loop but I'd prefer a CSS solution.

Upvotes: 0

Views: 52

Answers (1)

php-dev
php-dev

Reputation: 7156

This is a simple example

ul {
    display: inline-block;
    width: 100%;
}

li {
    float: left;
    width: 10%;
}
li:nth-child(7n + 1) {
    clear: both;
}

Look at this fiddle.

Upvotes: 1

Related Questions