html - 当某个元素在 Tumblr 主题中不可用时从该元素中删除 CSS？

Question

我正在构建一个 tumblr 主题，并在永久链接页面上对我的笔记列表应用了填充。

当启用笔记列表并且帖子有转发/点赞时，它会按预期显示列表，并在顶部和底部填充。我的问题是当注释列表已启用但该帖子没有注释时，由填充创建的间隙仍然可见，因此它创建了一个不应该存在的间隙。

请问有解决办法吗？我很确定一定有，但我就是无法理解它。

在点赞/转发按钮和讨论框之间创建了一个差距示例。

http://minori-theme.tumblr.com/post/104674196686/melbourne-based-photographer-brooke-holms

HTML

{block:IfShowNotesList}
 {block:PermalinkPage}
<div class="f-all e-all d-all b-all a-all">
    <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
            {block:PostNotes}
                {PostNotes}
            {/block:PostNotes}
                </ul>
    </section>
</div>
{/block:PermalinkPage}
{/block:IfShowNotesList}

CSS

{block:IfShowNotesList}
    ul.postListNotes {padding-top: 50px; padding-bottom: 80px;}
{/block:IfShowNotesList}

Answer 1

{block:****} 标签正是为此目的而创建的:仅当 **** 存在时才显示标记。

如果没有要显示的注释，使用此代码隐藏 ul 元素:

{block:PostNotes}
    <ul class="postListNotes">
        {PostNotes}
    </ul>
{/block:PostNotes}

您也可以隐藏其余元素:

{block:IfShowNotesList}
    {block:PostNotes}
        {block:PermalinkPage}
        <div class="f-all e-all d-all b-all a-all">
            <section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
                <ul class="postListNotes">
                    {PostNotes}
                </ul>
            </section>
        </div>
        {/block:PermalinkPage}
    {/block:PostNotes}
{/block:IfShowNotesList}