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

Answer 2

我认为这不是多余的专栏。

看起来是浏览器添加到列表元素的默认边距或填充。

检查ul上的默认样式。

也请参见此W3C default style sheet sample：

将此添加到您的代码中：

ul {
   margin: 0;
   padding: 0;
}

Answer 3

这是因为您在Clearfix元素上使用了ul类。 Clearfix将:before和:after添加为子项，因此CSS Grid将它们视为项目。

删除clearfix并使用以下样式进行处理：

float: left;
width: 100%