Есть 40 ячеек .ticket-link в блоке #ticket. Максимальная ширина #ticket - 560px. Минимальная - 320px.
Нужно выравнивать .ticket-link по ширине + обнулять правый margin для последней ячейки в ряде. Сейчас в css захардкоренно два значение, для 560px и 320px. Как правильно выравнивать для экранов шириной между 560 и 320. Хардкорить все популярные ширины экранов не хочу.
#tickets .ticket-links .ticket-link {
width: 47px;
height: 47px;
line-height: 47px;
box-sizing: border-box;
background-color: #f7fcff;
border: 1px solid #0064c6;
color: #0064c6;
text-align: center;
display: block;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
#tickets .ticket-links .ticket-link:nth-child(10n+10) {
margin-right: 0;
}
@media only screen and (max-width:600px) {
#tickets .ticket-links .ticket-link {
width: 52px;
height: 52px;
line-height: 52px;
}
#tickets .ticket-links .ticket-link:nth-child(5n+5) {
margin-right: 0;
}
}
@media only screen and (max-width:320px) {
#tickets .ticket-links .ticket-link:nth-child(5n+5) {
margin-right: 0;
}
}
<div id="tickets">
<div class="ticket-links">
<a class="ticket-link" href="http://examenpdd.local/tickets/1">1</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/2">2</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/3">3</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/4">4</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/5">5</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/6">6</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/7">7</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/8">8</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/9">9</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/10">10</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/11">11</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/12">12</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/13">13</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/14">14</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/15">15</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/16">16</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/17">17</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/18">18</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/19">19</a>
<a class="ticket-link" href="http://examenpdd.local/tickets/20">20</a>
<div class="clear"></div>
</div>
</div>