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