Пагинация на сайте одной полосой

Пагинация должна вписываться в общий дизайн, вот накалякал простенький CSS

Имеем html:

<div class="search-results-paging"> 
 <span class="current">1</span> 
 <span><a href="http://wetweb.ru/?page=2">2</a></span> 
 <span><a href="http://wetweb.ru/?page=3">3</a></span> 
 <span><a href="http://wetweb.ru/?page=4">4</a></span> 
 <span class="next">
  <a href="http://wetweb.ru/?page=2" title="Следующая страница">&nbsp;&gt;</a>
 </span> 
 <span class="next">
  <a href="http://wetweb.ru/?page=6" title="Последняя страница">&nbsp;&gt;&gt;</a>
 </span>
</div>

Рисуем CSS:

.search-results-paging, .search-results-paging a, .search-results-paging span{ 
    display: flex;
    flex-direction: row;
    background-color: #303030;
    color: white;
}
.search-results-paging a, .search-results-paging span{
	line-height:30px;
	text-decoration: none;
	width: 30px;
    height: 30px;
	justify-content: center;
    background-color: #303030
}
.search-results-paging span{
    background-color: #72b626;
}

Собственно имеем вид:

1 2 3 4  >  >>

Рисовал пагинацию под этот сайт на GetSimple CMS с установленным плагином I18n Search

Все материалы сайта не претендуют на безусловную правильность, а являются лишь примерами решения некоторых задач.
Copyright © 2025 wetweb.ru