Как создать пространство между кнопками встроенного блока?

Question

Я очень новичок в этом, так что извините за любое неправильное использование слов. Я хочу иметь пробел между двумя кнопками, которые имеют встроенный дисплей. Свойство «margin» делает не то, что мне нужно.

CSS:

.pagination{
    background:#155484;
    padding:20px;
    border:2px solid #155484;
    border-radius:3px;
    position:absolute;
    left:75%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
}

.pagination a{
    color:#fff;
    text-decoration:none;
}

HTML

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">&larr;</a>
            {/block:PreviousPage}
            {block:NextPage}
                <a href="{NextPage}">&rarr;</a>
            {/block:NextPage}
        {/block:Pagination}
</div>

(Это использует переменные Tumblr c.)

Также, если здесь есть что-то, что можно изменить или опустить, было бы здорово узнать!

Answer 1

Вот 3 примера, которые добавят пробелы в этом сценарии:

1. Использование   кодов между ссылками

   ссылка № 1 ( a href ...)

          

   ссылка № 2 (href ...)

2. Использование пустого <span class="spacing"></span>

'spacing' может быть определено в css как:

.spacing {
    padding-right: 20px;
}

3. Настройка свойства padding-right тега <a>

.pagination a {
    padding-right: 20px;
    // other attributes
}

Answer 2

CSS:

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}    

HTML:

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>

Answer 3

Необходимо установить заполнение: 0 на UL тег и якорный тег определить отображение: встроенный блок и установить заполнение как вы хочу так проверить ниже фрагмент.

.pagination{
  background:#155484;
  padding: 0;
  margin: 0;
  border: 2px solid #155484;
  border-radius:3px;
  position: relative;
  display: inline-block;
}
.pagination li{
  display: inline-block;
  list-style-type: none;
}
.pagination a{
  color: #fff;
  border-radius:3px;
  display: inline-block;
  padding: 8px 12px;
  text-decoration:none;
  background: #155484;
}
.pagination a:hover, .pagination a.current{
  background: #fff;
  color: #155484;
}

<ul class="pagination">
  <li><a href="#">Prev</a></li>
  <li><a href="#" class="current">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">Next</a></li>
</ul>

Answer 4

Настройка padding:left или padding:right на ли должны работать

.pagination li{
    display:inline-block;
    list-style-type:none;
    padding-left: 10px;
    padding-right: 10px;
}