I have a UL on my website with 30 list items, each containing an icon that is 130px wide, causing the list to span across multiple rows.
It's hard to explain the issue, so here's a JSFiddle example.
ul {
display: table; margin: 10px auto;
}
li {
float: left; list-style: none; margin-left: 5px; padding: 5px 0;
}
li a {
background: #82B5DA;
border: 1px solid #599CCE;
border-radius: 3px;
padding: 5px; color: #333;
text-decoration: none;
}
The goal is to make the spacing between list items dynamic and ensure that the rightmost item touches the edge of the screen instead of leaving a gap until there is enough space for a new item. When there is enough room for another item on the row, the width between the items should reset.
Essentially, transform this:
|[aaaaaaaaa][bbbbbbbbbb][cc] |
|[dddddddddddddddddddbb][eeeee] |
Into this:
| [aaaaaaaaa] [bbbbbbbbbb] [cc] |
| [dddddddddddddddddddbb] [eeeee]|
I hope that clarifies things. I'm new to posting here, so apologies if there are any mistakes.