如何删除CSS网格中的第一个空列? [英] How do I remove the first empty column in a CSS grid?
本文介绍了如何删除CSS网格中的第一个空列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一开始有一个空列,无法弄清楚为什么?
I've got an empty column at the start and can't work out why?
<ul class="inrpager clearfix">
<li class="inrpager-previous"> </li>
<li class="inrpager-title">Overview</li>
<li class="inrpager-next">test</li>
</ul>
css代码映射网格模板
The css code maps a grid template
body.not-front ul.inrpager {
list-style: none;
display: grid;
grid-template-columns: 1fr 0.8fr 1fr;
}
结果是从中间列映射内容。
为什么?
The result is that the content is mapped from the middle column. Why is that?
推荐答案
.clearfix可能会与显示表一起抛出:: before并可能:: :: after等,所有这些在网格布局中都不能很好地发挥作用。.
.clearfix will probably be throwing in a ::before and possible an ::after with display table et all which does not play well with grid layout so..
css:
/* position absolute breaks it free and clear from the grid layout */
ul.inrpager.clearfix::before {
position:absolute;
}
ul.inrpager.clearfix::after {
position:absolute;
}
这篇关于如何删除CSS网格中的第一个空列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文