我正在构建一个 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}
最佳答案
{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}
关于html - 当某个元素在 Tumblr 主题中不可用时从该元素中删除 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27380716/