How to align buttons properly

时间:2019-02-17 作者:Avinash Patel

我在我的函数中使用以下代码。php文件显示两个按钮。

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class=\'button-default\' href=\'".get_the_permalink()."#respond\'>See Answer</a>";
        echo "<a class=\'meta-answer\' href=\'".get_the_permalink()."#comments\'>Give Answer</a>";
    }
}
这工作正常,但这些按钮的对齐方式并没有像您在小屏幕上看到的那样正常。我想知道如何创建不同的类/div,使它们看起来更小,并正确对齐。

谢谢Avinashenter image description here

1 个回复
最合适的回答,由SO网友:Brada 整理而成

首先让我们改进您的代码:

function action_after_question_content() {
    if (!is_single()) {
        echo "<a class=\'button-default\' href=\'".esc_url( get_the_permalink() )."#comments\'>See Answers</a>";
        echo "<a class=\'meta-answer\' href=\'".esc_url( get_the_permalink() )."#respond\'>Give Answer</a>";
    }
}
注意:我们可以通过获取评论的数量来进一步改进,并在此基础上构建按钮:例如:如果我们有多个评论,我们将使用“查看答案”,如果我们有一个,我们将使用“查看答案”,如果没有,我们可以显示类似“成为第一个回答的人!”

这看起来像:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        if ( $num_comments ) :
            echo \'<a class="button-default btn-puzzle-align" href="\' . esc_url( get_the_permalink() ) . \'#comments">\' . _n( \'See Answer\', \'See Answers\', $num_comments, \'textdomain\' ) . \'</a>\';
            echo \'<a class="meta-answer btn-puzzle-align" href="\' . esc_url( get_the_permalink() ) . \'#respond">\' . __( \'Give Answer\', \'textdomain\' ) . \'</a>\';
        else :
            echo \'<a class="meta-answer btn-puzzle-align" href="\' . esc_url( get_the_permalink() ) . \'#respond">\' . __( \'Be the first to answer!\', \'textdomain\' ) . \'</a>\';
        endif;
    }
}
CSS中的何处应该如下所示:

.btn-puzzle-align {
   margin-bottom: 2.5rem;
}
这只是一个猜测,margin机器人无法工作,但可以根据CSS的其他元素工作。该代码也未经测试。请注意,您需要将textdomain更改为主题textdomain,并将2.5rem更改为您可能需要的内容。

编辑:

另外,在写了这篇文章之后,一个更好的方法可能是将按钮包装在另一个元素中:

function action_after_question_content() {
    if (!is_single()) {
        $num_comments = get_comments_number();
        echo \'<div class="btn-puzzle-align">\';
            if ( $num_comments ) :
                echo \'<a class="ap-see" href="\' . esc_url( get_the_permalink() ) . \'#comments">\' . _n( \'See Answer\', \'See Answers\', $num_comments, \'textdomain\' ) . \'</a>\';
                echo \'<a class="ap-give" href="\' . esc_url( get_the_permalink() ) . \'#respond">\' . __( \'Give Answer\', \'textdomain\' ) . \'</a>\';
            else :
                echo \'<a class="ap-see" href="\' . esc_url( get_the_permalink() ) . \'#respond">\' . __( \'Be the first to answer!\', \'textdomain\' ) . \'</a>\';
            endif;
        echo \'</div>\';
    }
}
并使用填充物,这通常会起作用。

.btn-puzzle-align {
   display: flex;
   justify-content: space-evenly;
   padding-bottom: 2.5rem;
}
.btn-puzzle-align > .ap-see, .btn-puzzle-align > .ap-give{
    float:none;
} 

相关推荐

是否可以使用unctions.php将文本插入到html标记中?

我的意思是:我正在使用一个名为“pods”的插件,它允许创建自定义(CPT)并在这些CPT之间建立关系。然而,我可以看到一个小小的缺陷,我为美国各州创建了一个CPT,所以每个CPT都是一个单独的州,这意味着在这个CPT中创建的每个帖子都有州的标题。下面是HTML和相关CSS<header class=\"entry-header clr\"> <h2 class=\"single-post-title entry-title\" itemprop=\"headline\"