href之间的空间

Question

我有这个div。

 <div class="abc">
    <a href="#">Select All</a>
     <a href="#">#</a>
    {{#each letters}}
        <a href="#">{{this}}</a>
    {{/each}}
 </div>

打印类似

的内容

但我希望得到类似的东西。

忽略星形图标。

我想在每个字母之间留出空格，并且还要改变href的颜色

已尝试

margin-left: 1.375rem;

但它没有用。

Answer 1

在display: inline-block;中使用<a>并设置margin或padding

<强> CSS

a{
    display: inline-block;
    margin-right: 10px; //Adjust your needs
}

<强> DEMO HERE

Answer 2

使用填充：

<a href="#" style="padding:3px">{{this}}</a>

当然，使用css类会更加清晰。