GeneratePress主题修改文章导航在同一行显示

默认情况下,文章导航按如下方式显示:

下面的 CSS 将按如下方式显示文章上下页:

图标类型:字体

.post-navigation {
    display: flex;
}

.post-navigation .nav-next {
    width: 50%;
    text-align: right;
}

.post-navigation .nav-previous {
    width: 50%;
}

.post-navigation .nav-next .next:before {
    display: none;
}

.post-navigation .nav-next .next:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}

图标类型: SVG

.post-navigation {
	display: flex;
}

.post-navigation .nav-next {
	width: 50%;
	text-align: right;
	display: flex;
	flex-direction: row-reverse;
}

.post-navigation .nav-previous {
	width: 50%;
}

.nav-next .gp-icon {
	margin-left: .6em;
	margin-right: 0;
}
根据个人情况添加css,边距字体大小自行调整padding-top:20px; font-size: 16px;
另一种方法是在GenerateBlocks中自行设计导航,其中有很多模板可供选择,也可以设置导航在同一类别中,等等可玩性很多。
声明:本站资源绿色无后门无广告,可放心下载。如无特殊说明或标注,均为本站原创发布,转载请注明出处!