There are 40 .ticket-link cells in the #ticket block. The maximum width of #ticket is 560px. The minimum is 320px.

It is necessary to align .ticket-link in width + reset the right margin for the last cell in the row. Now there are two values ​​in css, for 560px and 320px. How to properly align for screens with a width between 560 and 320. I do not want to hardcore all popular screen widths.

#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>

enter image description here

enter image description here

  • Use bootstrap entirely, but only part of it is better. It will be easier to impose responsive templates. - agaro706

4 answers 4

It seems that if I correctly understood the problem, then inline-block it automatically does

 *{ margin:0; padding:0; text-align:justify; } .block{ width:80%; margin:auto; background:lightblue; text-align:center; } .item{ display:inline-block; width:100px; height:100px; border:1px solid blue; text-align:center; line-height:100px; margin:8px; text-decoration:none; color:blue; } 
 <div class="block"> <a href="" class="item">item1</a> <a href="" class="item">item2</a> <a href="" class="item">item3</a> <a href="" class="item">item4</a> <a href="" class="item">item5</a> <a href="" class="item">item6</a> <a href="" class="item">item7</a> <a href="" class="item">item8</a> <a href="" class="item">item9</a> <a href="" class="item">item10</a> <a href="" class="item">item11</a> <a href="" class="item">item12</a> <a href="" class="item">item13</a> <a href="" class="item">item14</a> <a href="" class="item">item15</a> <a href="" class="item">item16</a> <a href="" class="item">item17</a> <a href="" class="item">item18</a> <a href="" class="item">item19</a> <a href="" class="item">item20</a> </div>

for clarity: codepen.io

    Increase the width of the base container to the right by the width of the margin .

     width: calc(100% + 10px);

    Thus, the right indent will be, but it will fall inside the extra 10px width.

     .ticket-links { width: calc(100% + 10px); } #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; } 
     <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>

    • Thank you, this solves the problem with indenting. And you can somehow dynamically calculate the width of the ticket-link, depending on the width of the ticket-link s . To the left and right of the screen (for example 400px) was the same indent. That is, the end of the last cell in the row coincided with the end of the parent block? imgur.com/a/epymk - user2168735
    • Sorry if I want a lot. just want symmetry on all screens - user2168735
    • @ user2168735 can be done on flex box
    • @user2168735 based on a template that I think you can’t do so, at least I don’t know how, unless, of course, we take into account the javascript options. - Dmitry Polyanin

    As an option - you can do something like this:

     // просто для компактности примера let container = document.querySelector('#tickets .ticket-links'); for (let i = 2; i <= 40; i++) { container.insertAdjacentHTML('beforeend', ` <a class="ticket-link" href="http://examenpdd.local/tickets/${i}">${i}</a> `); } 
     #tickets { --link-size: 52px; min-width: 320px; max-width: 560px; margin: auto; } #tickets .ticket-links { display: inline-flex; flex-wrap: wrap; justify-content: center; text-align: center; padding: 5px; } #tickets .ticket-link { flex: 0 0 var(--link-size); height: var(--link-size); margin: 5px; line-height: var(--link-size); box-sizing: border-box; background-color: #f7fcff; color: #0064c6; border: 1px solid #0064c6; text-decoration: none; } 
     <div id="tickets"> <div class="ticket-links"> <a class="ticket-link" href="http://examenpdd.local/tickets/1">1</a> </div> </div>

    Demo on JSbin .

      The final solution was obtained by combining the answers @ Dmitry Polyanin and @ yar85. Which answer to choose in this case?

      For the right indent problem, I use

       width: calc(100% + 10px);

      as Dmitry showed.

      To align the cells in the center, I use flex as shown by @ yar85.

      Result:

      enter image description here

      Code:

       #tickets .ticket-links { width: calc(100% + 10px); width: -moz-calc(100% + 10px); width: -webkit-calc(100% + 10px); --link-size: 47px; display: inline-flex; flex-wrap: wrap; justify-content: center; } #tickets .ticket-links .ticket-link { flex: 0 0 var(--link-size); height: var(--link-size); line-height: var(--link-size); box-sizing: border-box; background-color: #f7fcff; border: 1px solid #0064c6; color: #0064c6; text-align: center; margin-right: 10px; margin-bottom:10px; } @media only screen and (max-width:600px){ #tickets .ticket-links .ticket-link { --link-size: 52px; } }