python - 如何在 Django 模板中对齐文本或 url？ - Python 速成类(class)，元素 "Learning Log"

Question

我正在使用“Python 速成类(class)，第二版”一书创建“学习日志” Django Web 应用程序。 但自从读到本书的第 20 章后，我开始遇到问题。

我创建了一个模板，它显示特定主题的所有条目。 在页面上，我们有条目标题、日期、编辑它的按钮，当然还有它的文本。 跟着书本，我使用bootstrap4让页面看起来更漂亮。

但我想将条目日期和“编辑条目”网址对齐到右侧。

我尝试了 style="text-align:right;" ，但它不起作用。

我对网络开发真的很陌生，所以我恳求你不要严格地评判我:)

Page with topic and its entries

topic.html

{% extends 'learning_logs/base.html' %}

{% block page_header %}
<h3>{{ topic }}</h3>
{% endblock page_header %}

{% block content %}
    <p>
        <a href="{% url 'learning_logs:new_entry' topic.id %}">Add a new entry</a>
    </p>

    {% for entry in entries %}
        <div class="card mb-3">
            <h4 class="card-header">
                {{ entry.title }} 
                <small style="text-align:right;">
                    {{ entry.date_added|date:'M d, Y'}}
                    <a style="text-align:right;" href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
                </small>
            </h4>
            <div class ="card-body">
                {% if entry.text|length > 500 %}
                    {{ entry.text|linebreaks|truncatechars:500 }}
                    <p><a href="{% url 'learning_logs:entry' entry.id %}">Read more</a></p>
                {% else %}
                    {{ entry.text|linebreaks }}
                {% endif %}
            </div>
        </div>
    {% empty %}
            <p>There are no entries for this topic yet.</p>
    {% endfor %}

{% endblock content %}

我尝试了 style="text-align:right;" ，但它不起作用。

我想将条目日期和“编辑条目”网址对齐到右侧。

Answer 1

尝试将 date 和 link 元素包装在 div 元素中，类名如 details_of_entry，像这样:

<div class="card-header">
    {{ entry.title }}
    <div class="details_of_entry">
        <small>
            {{ entry.date_added|date:'M d, Y'}}
            <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
        </small>
    </div>
</div>

然后添加以下 CSS:

.details_of_entry {
    text-align: right;
}

.details_of_entry a {
    margin-left: 14px; /* adjust according to your need */
}