Блог

Главная - Вопросы по программированию - Как удалить пробелы между элементами в CSS-разбиении на страницы?

Как удалить пробелы между элементами в CSS-разбиении на страницы?

#css #pagination #space #jsfiddle

Вопрос:

Непреднамеренное пространство появляется между элементами простой разбивки на страницы. Проверьте эту ссылку на jsfiddle

В чем причина этого?

(Это разбиение на страницы ниже, чтобы вопрос можно было опубликовать.)

         <div class="pagination">
            <a href="#">amp;laquo;</a>
            <a href="#">1</a>
            <a href="#" class="active">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">amp;raquo;</a>
        </div>

Комментарии:

1. вы имеете в виду пространство между a тегами?

2. ДА. Я, кажется, не могу понять, как устранить это пространство. Я пробовал возиться с кодом, но, похоже, ничего не работает.

Ответ №1:

Я только что нашел следующее в этой статье.

 //from https://codepen.io/chriscoyier/pen/hmlqF 
 .pagination {
  display: flex;
} 
  <div class="pagination">
   <a href="#">amp;laquo;</a>
   <a href="#">1</a>
   <a href="#" class="active">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">amp;raquo;</a>
 </div>

Ответ №2:

На самом деле <a> такие элементы настройки уже создают пробелы. Если вы удалите весь CSS-код, вы увидите, что пробелы останутся. Добавив свой CSS, вы эффективно уменьшили пропорциональную разницу между выделенными пробелами. Потому что, когда вы увеличиваете два соседних объекта в одинаковой пропорции (каждый из них X), а расстояние между ними увеличивается в той же пропорции (только один X), единственное, что уменьшается, — это их расстояние друг от друга по отношению к их размеру.

Все, что я сделал, это добавил отрицательное поле с обеих сторон каждого .pagination a , вот так:

 .pagination a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 16px;
    margin: 0px -3px;
    color: hsl(0, 0%, 0%);
    border-radius: 4px;
    transition: background-color 0.3s;
}

Примечание: Просто добавьте строку поля под собой .pagination a и установите отрицательное значение для горизонтального поля, которое соответствует вашим потребностям.

Метки: