如果有多个锚标记，则使用 jquery 将空格附加到内联锚标记答案

【问题标题】：append a space with jquery to inline anchor tags if there are more than one如果有多个锚标记，则使用 jquery 将空格附加到内联锚标记
【发布时间】：2018-09-20 05:40:22
【问题描述】：

我有一个 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：

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

【问题讨论】：

将它们设为 inline-block 然后它们之间自然会有一个空格，或者您可以在左右添加相等的边距
我尝试了 inline-block 但它没有在它们之间创建空格
你确定：jsfiddle.net/emdqd5fn/2 它应该有字体大小的空间
我看到它在那个小提琴中工作，但由于某种原因，当我输入我自己的代码时它不起作用

标签： jquery css centering

【解决方案1】：

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

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），则字符串末尾的最后一个空格是必要的，以防止意外连接。

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

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

【讨论】：

【解决方案2】：

您可以按如下方式添加边距：

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

这将为每个带有类 .catBox 的元素的左右添加 5px 的边距

【讨论】：