Как удалить первый пустой столбец в сетке CSS?

Question

У меня пустая колонка в начале, и я не могу понять почему?

<ul class="inrpager clearfix">
  <li class="inrpager-previous"> </li>
  <li class="inrpager-title">Overview</li>
  <li class="inrpager-next">test</li>
</ul>

Код CSS отображает шаблон сетки

body.not-front ul.inrpager {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
}

В результате контент отображается из среднего столбца. Почему это так?

Answer 1

Не думаю, что это лишний столбец.

Похоже, поле или отступ по умолчанию добавлены браузерами для элементов списка.

Проверьте стили по умолчанию на ul.

См. Также Пример таблицы стилей W3C по умолчанию :

Добавьте это к своему коду:

ul {
   margin: 0;
   padding: 0;
}

Answer 2

.clearfix, вероятно, добавит :: before и, возможно, an :: after с отображаемой таблицей и т. Д., Что не очень хорошо работает с разметкой сетки, так что ..

CSS:

/* position absolute breaks it free and clear from the grid layout */
ul.inrpager.clearfix::before {
  position:absolute; 
}

ul.inrpager.clearfix::after {
  position:absolute; 
}