Bootstap各リスト項目の後に外部アイコンを持つリンクのリスト

Question

リンクのリストを作成しようとしています。各リンクの後、私は同じサイトへの "新しいタブ"接続のフォント素晴らしいアイコンを配置したい。したがって、ユーザーはリンクをクリックして同じウィンドウでページを開くことができます。または、アイコンをクリックして新しいウィンドウでページを開くことができます。ここで

は、私は（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が2番目のアンカーが新しいリストアイテムであると考えていると仮定しています。

元のリンクのすぐ後ろに配置するにはどうすればよいですか。

ありがとうございました。同じ行にテキストとアイコンを保つために、すべての使用のCSSの

Answer 1

まず：あなたがで改行を追加する必要があるので、

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

これは、1行にできるだけ多く「要素を」ジャムしようとします各行の終わり。

<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/