Question

我有一个wordpress foreach循环，它会将类别列为我创建的帖子的锚点。它们是内联列出的，如果列出了多个，我想在它们之间添加一个空格。我试图在它们上添加一个右边距，但它会弄乱中心。

<div class="catBoxBig">
 <?php   $exclude = array("Archive");
    $categories = get_the_category();   
foreach ( $categories as $category ) {
    if (!in_array($category->cat_name, $exclude)) {
        echo '<div class="catBox"><a class="catName" href="'.esc_url( get_category_link( $category->term_id ) ).'">'.esc_html( $category->cat_name ).'</a></div>';
    }
} ?>
</div>

我的css for centering：

.catBigBox {text-align:center;}
.catBox {display:inline;}

Answer 1

您可以按以下方式添加保证金：

    .catBox{
      display: inline-block;
      margin: 0 5px;
    }

这将使用类.catBox

为每个元素的左右添加5px的边距

Answer 2

我要在输出字符串的末尾添加一个空格：

type*volatile

如果显示元素volatile（或甚至echo '<div class="catBox"><a class="catName" href="'.esc_url( get_category_link( $category->term_id ) ).'">'.esc_html( $category->cat_name ).'</a></div> ';）以防止意外连接，则字符串末尾的最后一个空格是必需的。

或CSS方式 - 在每个inline上添加一个边距，但最后一个：

inline-block

如果有多个

2 个答案: