http://archiess.imtqy.com/ - help me figure it out, I don’t know how to solve the problem with lists, 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; }
  • Remove this property ul {text-align-last: justify;} - Ihor Tkachuk
  • it is necessary that the blocks are evenly stretched - Artem Yelinetski
  • use bootstrap or flex (better than him). Then you will not write the wrong crutches. There you will have clear markup, and the correct formatting of the text. Especially since you already have a bootstrap in your code, why don't you use columns for cells? Then just remove the text-align-last: justify; and everything will work for you, I have already checked on your typesetting - Vasily Barbashev

0