Question

我很难找到一种为每个类似于以下内容的注释创建单独的边框的方法。

但是，当我添加新评论时，边框会像下面一样翻倍

我当前正在使用Django / python，这是我的html文件

  <div class="comments--section ">
    {% for comment in comments %}
    <div class="comments--border">
      <p class="comments--user">{{comment.user }}</p>
      <p class="comments--date">{{comment.date_added|date:'M d, Y' }}</p>
      <p class="comments--entry">{{ comment }}</p>


      {% if request.user.is_superuser %}
      <p>
        <a href="{% url 'blogging_logs:delete_comment' comment.id %}">Delete comment</a>
      </p>
      {% else %}
        {% if comment.user == request.user %}
          <p>
            <a href="{% url 'blogging_logs:delete_comment' comment.id %}" class="comments--delete">Delete comment</a>
          </p>
          </div>
          {% else %}
          {% endif %}
      {% endif %}
    {% empty %}
      <p>no comments entered yet.</p>
    {% endfor %}
  </div>

css文件：

&--section {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2
  }

  &--border {
    border-style: solid;
    border-width: 1px;
    margin-bottom: 2rem;
  }


  &--user {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0;

  }

  &--date {
    font-size: .7rem;
    font-weight: 300;
  }

  &--entry {
    font-weight: 300;
    font-size: 1rem;
  }

我知道边界加倍的原因，但是我不知道如何解决。如果我将div类移出循环，它将为每个注释创建一个大框，而不是单个框。有什么建议吗？

谢谢！

Answer 1

  <div class="comments--section ">
       {% for comment in comments %}
       <div class="comments--border">
            <p class="comments--user">{{comment.user }}</p>
            <p class="comments--date">{{comment.date_added|date:'M d, Y' }}</p>
            <p class="comments--entry">{{ comment }}</p>

           {% if request.user.is_superuser %}
            <p>
               <a href="{% url 'blogging_logs:delete_comment' comment.id %}">Delete comment</a>
            </p>
          {% elif comment.user == request.user %}
            <p>
               <a href="{% url 'blogging_logs:delete_comment' comment.id %}" class="comments--delete">Delete comment</a>
            </p>

            {% else %}
              <p> ** You can add any message if you wish**
              </p>
           {% endif %}

     </div>
     {% empty %}
     <div class='comments--border'>
           <p>no comments entered yet.</p>
     </div>
     {% endfor %}
  </div>

在这里，我对您的HTML进行了一些更改。 django中还有一个elif标签。因此，如果嵌套，则可以使用它代替编写。

为每个注释创建单独的边框Django Css

1 个答案: