@arbitino

Выравнивание ячеек страниц в постраничной навигации?

Здравствуйте, я только начал интересоваться версткой сайтов, но столкнулся с проблемой, которую даже правильно не могу сформулировать. Короче говоря, у меня ячейки с номерами страниц получаются разного размера и выглядит это все не ровно, как можно это исправить?
Вот как это выглядит у меня:
6058b0d787460355960602.png
А вот как я хотел бы сделать:
6058afe14e6a9383221281.png
Пожалуйста помогите, вот мой css код:

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
text-align: center;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;
background-color: #c1c8c7;
}

ul.pagination li a.active {
background-color: purple;
color: white;
border: 1px solid purple;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
Allegro75
@Allegro75
SummaryTables.ru - сайт с футбольной статистикой
Дык установить ячейкам width не пробовали?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
float:left не надо. Просто ссылки в строку, width конечно-же, margin: одно значение.
Ответ написан
Комментировать
SKolt
@SKolt
https://www.instagram.com/seregamih/
Да не надо задавать никакой ширины. Просто используйте флексы или гриды.
Вот пример на гридах, набросал за минут 5: https://codepen.io/master-css/pen/GRrreYe

Вообще изучите тему. Можно вообще задать минимальную ширину и пункты будут сами перестраиваться в зависимости от ширины экрана.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы