Question

在帖子的页脚上，我有一个底部边框，同时显示我的评论计数和社交分享按钮。我希望评论计数显示为左（并与边框的前面对齐），我希望社交按钮显示在右侧。社交按钮与行的末尾对齐，但由于某种原因，注释计数在左侧略微缩进？有人知道为什么吗？提前致谢。我附上了下面的图片。

我发现了这个问题 - 感谢您的帮助

my single.php

<?php
get_header();
the_post_thumbnail('banner-image'); 
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
   <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
    <div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">subscribe to email</a></h2></div>
 <?php get_template_part( 'prevandnextpost' ); ?>

<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
 
?>

css

 .post-footer {
    border-bottom: 1px solid #000000;
    margin:40px 100px 0 100px;
    
max-width:1865px;
     display: block;
     overflow: hidden;
}
.post-footer-comment {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: left;
}
.post-footer-comment a:hover {
    color:#555555;
}
.share-buttons-post {
    letter-spacing: 10px;
    display: inline-block;
}
.share {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: right;
    margin-top:7px;
}
.share span {
    display: inline-block;
    position: relative;
    top:3px;
}

Answer 1

我不确定，因为我无法轻松运行您的代码。

我认为你应该看看： <h1 class="post-footer-comment"> 这是我认为的问题：

display: inline-block;
float: left;

这将强制页脚注释标题到下一行。尝试删除float: left并查看其功能。

你能截取屏幕截图并附上以便了解最新情况吗？

Answer 2

您的评论计数似乎位于h1标记内，该标记固有地应用了边距，填充等。您需要修改h1的类：

.post-footer-comment {
    margin-left: 0;
    padding-left: 0;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .2em;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    float: left;
}

从语义上讲，这对h1标签来说并不是很有用。由于您的页脚内容不在section标记内或重置标题上下文的任何内容，因此您基本上声明页脚文本“X评论”以及后来“从不错过帖子”同样重要作为你的“帖子标题”h1。如果要重置footer的上下文，最好将整个页脚部分包含在h1标记内。

当您的内容被搜索引擎编入索引，或者被屏幕阅读器或其他辅助设备读取时，上下文将会很奇怪。为了构建可靠的语义HTML结构，我将重新审视这些元素。

也就是说，要解决您的问题，您只需删除目标元素上的margin和padding即可。

标题是缩进的，我不知道为什么

2 个答案: