http://archiess.imtqy.com/ - help me figure it out, I don’t know how to solve the problem with lists, one block jumps out, and how to cancel justify inside li to align the text in the center.

https://github.com/Archiess/archiess.imtqy.com - code

html

<body> <div class="header"> <div class="row"> <div class="col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 text-center"> <h1>Pokedex</h1> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-6"> <ul id="pokemon-list"></ul> <div id="pokemon-list-loader"><img src="ajax-loader.gif" /></div> <button id="load-more" class="btn btn-success">Load more</button> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div id="pokemon"></div> <div id="pokemon-loader"><img src="ajax-loader.gif" /></div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>

js

 function loadMorePokemons() { $('#pokemon-list-loader').show(); $.get(getLoadMoreUrl(), function (data) { page++; var template = ''; $.each(data.objects, function (i, pokemon) { template += ` <li class="pokemon" id="${pokemon.national_id}"> <img class="image" src="${getPokemonImageUrl(pokemon.national_id)}" /><br> <b>${pokemon.name}</b> <div>${getTypes(pokemon.types)}</div> </li> `; }); $('#pokemon-list').append(template); $('#pokemon-list-loader').hide(); }); }

css

 ul{ margin:0; padding:0; text-align:justify; line-height:0; /*margin:0;*/ padding:0;*/ /*для IE-6-7*/ text-justify:newspaper; text-align-last: justify; } ul:after { width: 100%; height: 0px; visibility: hidden; overflow: hidden; content: ''; display: inline-block; } ul li{ display:inline-block; line-height:normal; height:250px; width:150px; border: 1px solid black; margin-bottom: 30px; text-align: center; list-style:none; padding:10px; }
  • Where to look, what jumps out? And how to understand this отменить justify внутри li, что бы выровнять текст по центру ? - Ihor Tkachuk
  • Add a minimal example directly to the question. - Qwertiy ♦
  • I specify initially for all ul blocks {text-align: justify}, then I want ul li {text-align: center} inside <li> blocks, but this does not work. - Artem Yelinetski
  • If you click on the first link and look at the 7th block, then it gets knocked up for some reason. - Artem Yelinetski

1 answer 1

Try changing the display parameter ul li to inline-table . File app.css line 80.

 ul li{ display: inline-table;
  • Thank you very much, it helped, but how is the text in the center now made in the li block? - Artem Yelinetski