Я использую тему «Точка» и пытаюсь переместить кнопку предыдущей страницы, чтобы она появилась слева, я посмотрел файл Styles.css и понял, как сделать следующую страницу правой, но не могу разберись, как увеличить расстояние между двумя кнопками и сделать предыдущую страницу кнопкой слева, они просто сложены вместе …

Вот скриншот этого:

https://imgur.com/z9qiTNG

и вот код нумерации страниц из файла styles.css:

/* Pagination */ nav.posts-navigation { clear: both } .pagination { clear: both; overflow: hidden; width: 100%; margin: 5px auto; text-align: center; font-size: 18px; } .single .pagination { border: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin-top: 0; padding: 3% 0; width: 100%; text-align: right; } .pagination ul { list-style: none; margin: 0; display: inline-block; } .pagination ul li { display: inline-block; margin-bottom: 5px; } .pagination .current, .pagination .dots, .pagination a:hover { color: #fff; margin: 0 1px 0 0; display: inline-block; line-height: 1; text-decoration: none; padding: 10px 13px; background: #2a2a2a; font-weight: bold; margin-bottom: 10px; } .single .pagination .current { padding: 0; margin: 0; background: transparent; } .single .pagination a .currenttext { padding: 0; background: transparent; color: #FFF; margin-right: 0; margin-bottom: 0; } .single .pagination a:hover .currenttext { color: #fff } .pagination a { background: #38B7EE; margin: 0 1px 0 0; display: inline-block; line-height: 1; text-decoration: none; color: #fff; padding: 10px 13px; transition: all 0.25s linear; font-weight: bold; margin-bottom: 10px; } .pagination ul li:last-child a { margin-right: 0 } .pagination a:hover { color: #fff } .pagination i.icon-left { margin-right: 7px } .pagination i.icon-right { margin-right: 7px } .top { float: right; position: absolute; left: 50%; top: -18px; width: 52px; height: 52px; margin-left: -26px; background: #eee; border-top: 1px solid #ddd; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; z-index: 100; } .pnavigation2 { display: block; width: 100%; overflow: hidden; padding: 15px 0; float: left; margin-top: 20px; } .pagination .nav-previous { float: left } .pagination .nav-next { float: right } .pagination .nav-previous a, .pagination .nav-next a { color: #fff!important } .pagination .nav-previous a:hover, .pagination .nav-next a:hover { background-color: #222 } .single .currenttext { margin-bottom: 0 } .pagination .current .currenttext { margin-bottom: 10px } 

Один из способов сделать это — использовать Flexbox и justify-content: space-between . Каждая кнопка ссылки (flex children) прикрепляется к любому углу родительского элемента.

 .pagination { display: flex; justify-content: space-between; } .btn { background-color: #35bbee; padding: 10px 15px; color: white; text-decoration: none; } 
 {amp}lt;div class="pagination"{amp}gt; {amp}lt;a class="btn btn-prev" href="#"{amp}gt;Previous Page{amp}lt;/a{amp}gt; {amp}lt;a class="btn btn-next" href="#"{amp}gt;Next Pages{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; 

jsFiddle