Как растянуть ссылку внутри inline-block на всю его длину и ширину?

Question

[Асиков Артур]

Подскажите, почему ссылка не растягивается на всю ширину родительского блока ul.pagination-block ?

.pagination {
  text-align: center;
}

.pagination li{
  display: inline-block;
  margin-right: 15px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 0 10px;
}

.pagination li a{
  display: block;
  cursor: pointer;
}

<ul class="pagination">
  <li class="active"><a href="#">1</a></li>
  <li><a href="/working/2/1/page-2">2</a></li>
  <li><a href="/working/2/1/page-3">3</a></li>
  <li><a href="/working/2/1/page-4">4</a></li>
  <li><a href="/working/2/1/page-5">5</a></li>
  <li><a href="/working/2/1/page-18">&gt;</a></li>
</ul>

Comments

[Rustam Bainazarov]

Ссылке добавьте display: block;

[Асиков Артур]

Рустам Байназаров, добавил ей в первую очередь, не сработало(
.pagination li a{
display: block;
cursor: pointer;
}

[Rustam Bainazarov]

Асиков Артур, вы поставили padding у родителя...

Поставьте его вашей ссылке, а не родителю:

[Асиков Артур]

Рустам Байназаров, спасибо большое!) напишите ответ, выберу его лучшим ;-)

Answer 1

[Rustam Bainazarov]

Вы поставили padding у родителя...

Поставьте его вашей ссылке, а не родителю:

Answer 2

[limiaol]

.pagination-block li{
display: inline-block
}
добавь width: 100%; или display: block

Comments

[Асиков Артур]

то есть в inline-block не получится растянуть?

[limiaol]

ссылка растянута, стоит display: block, padding уберите у li, поставьте его ссылке и добавьте box-sizing: border-box;