html - 每个列表项后带有外部图标的 Bootstrap 链接列表

Question

我正在尝试建立一个链接列表。在每个链接之后，我想为同一站点的“新标签”连接放置 Font Awesome 图标。因此用户可以单击链接并在同一窗口中打开页面。或者他们可以单击该图标并在新窗口中打开页面。

这是我尝试过的(python django 模板语言):

<div class="list-group">
{% for link in object.links.all %}
  <a href="{{ link.url }}" class="list-group-item">{{ link.title }}</a><a href="{{ link.url }}" target=_blank><i class="fa fa-external-link"></a>
{% endfor %}
</div>

此代码生成链接名称列表，名称下方的新列表行上带有图标。我假设 css 认为第二个 anchor 是一个新的列表项。

如何将它放在原始链接的后面。

Answer 1

首先使用css让文本和图标保持在同一行:

.list-group a { display: inline-block; }

这会尝试将尽可能多的“a 元素”塞到一行中，因此您需要在每行末尾添加一个换行符。

<div class="list-group">
{% for link in object.links.all %}
  <a href="{{ link.url }}" class="list-group-item">{{ link.title }}</a><a href="{{ link.url }}" target=_blank><i class="fa fa-external-link"></i></a> <br/>
{% endfor %}
</div>

你也忘了关闭你的 i 结束标签 ;)

示例:https://jsfiddle.net/krnnuxb1/