如果有多个，则附加一个 space 和 jquery 到内联锚标签

Question

我有一个 wordpress foreach 循环，它将列出类别作为我创建的帖子的锚点。它们以内联方式列出，如果列出的不止一个，我想在它们之间添加一个 space。我试图在它们上添加右边距，但它弄乱了居中。

<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 居中：

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

Answer 1

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

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

这将在 class .catBox

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

Answer 2

我会在输出字符串的末尾添加一个 space :

echo '<div class="catBox"><a class="catName" href="'.esc_url( get_category_link( $category->term_id ) ).'">'.esc_html( $category->cat_name ).'</a></div> ';

如果显示元素 inline（甚至 inline-block）以防止意外连接，则字符串末尾的最后一个 space 是必需的。

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

.catBox:not(:last-child) {margin-right: 4px;}

如果有多个，则附加一个 space 和 jquery 到内联锚标签

append a space with jquery to inline anchor tags if there are more than one

css

jquery

centering