如何删除 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

.clearfix 可能会抛出一个 ::before 和可能的 ::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; 
}