问题描述
如何将标签的右侧与文本的左侧对齐(所附图片显示了问题),使其看起来像这样:
superlongtagname | text1
shortertagname | text2
tinytagname | text3
这是我现在的样子:
这是我的模板代码(循环遍历 Django 对象列表):
<ul>
<li>
<span class="badge bg-{{ t.get_color_display }}">
{{ t.name }}
</span>
{{ rn.entry_text }}
</li>
</ul>
我尝试了对齐实用程序 (align-end
)、浮动(在 li
和 span
上)等,但似乎没有任何效果。
更新
我能够在 @Michael H 的帮助下完成这项工作。我试图避免使用桌子,但在摆弄了一段时间后,情况还不错。
解决方法
我会使用表格而不是 <ul>
标签:
<table class="table table-borderless">
<tbody>
<tr>
<td class="text-end">
<span class="badge bg-success">
added
</span>
</td>
<td class="w-100">Added something</td>
</tr>
<!--Other items-->
</tbody>
</table>