时间戳

首页 > 解决方案 > 如何更改php文件中的css

php - 如何更改php文件中的css

问题描述

我正在为我的博客使用帖子导航。对于这部分，我写了一些 CSS。它工作正常。但问题在于最新的帖子，它显示下一个帖子链接的空白区域。最旧的帖子也发生了同样的事情，它再次显示上一个帖子链接的银行空间。在此处输入图像描述

我为此部分添加了代码片段。我可以建议我如何修改这部分的 CSS。以下代码嵌入在 php 文件中。

<div class="row justify-content-center">
    <div class="sewl-more-posts">
        <div class="previous-post">
            <?php If(previous_post_link()){?>
            <span class="post-control-link">Previous Article</span>
            <span class="post-name"><?php previous_post_link(); ?></span>
            <?php } ?>
        </div>
        <div class="next-post">
            <?php If(next_post_link()){?>
            <span class="post-control-link">Next Article</span>
            <span class="post-name"><?php next_post_link(); ?></span>
            <?php } ?>
        </div>
    </div>
</div>

标签： phpcsswordpress

解决方案

首先，仅当 div 有内容时才输出它们：

        <div class="sewl-more-posts">
            <?php if (previous_post_link()){?>
                <div class="previous-post">
                <span class="post-control-link">Previous Article</span>
                <span class="post-name"><?php previous_post_link(); ?></span>
                </div>
            <?php } ?>
            <?php if (next_post_link()){?>
                <div class="next-post">
                <span class="post-control-link">Next Article</span>
                <span class="post-name"><?php next_post_link(); ?></span>
                </div>
                <?php } ?>
         </div>

这样，如果缺少上一篇或下一篇 div，您将能够使用:only-child伪类定位剩余的 div ：

.sewl-more-posts > div:only-child {
    text-align: center;
 }

推荐阅读