2017-09-25 4 views
0

Django 템플릿의 다음 동작에 약간의 혼란이 있습니다. 이로 인해 출력의 스타일이 제대로 지정되지 않습니다. 소스 HTML이 올 것 같다Django 1.10 템플릿이 부모 외부의 중첩 된 HTML 태그를 렌더링합니다.

<article class="article"> 
    <div class="post-preview"> 
     <a href="/articles/third-post/"> 
      <h2 class="post-title"> 
      Third Post 
      </h2> 
      <h3 class="post-subtitle"> 
        Third post lead-in text. 
      </h3> 
     </a> 
     <p class="post-meta" style="margin-bottom: 0;"> Posted by 
    <a href="">  
    </a> 

      on September 19, 2017 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Categories:</h4> 

      <a href="/articles/category/programming">Programming </a>    
     </p> 
    <p class="post-meta" style="margin: 0"> 
     <h4 style="display:inline-flex">Tags:</h4> 

    </p> 

    </div> 
    <hr> 
</article> 

있지만, 브라우저는 다음과 같은 취급합니다 :

<article class="article 
    {% if article.is_featured %} featured{% endif %} 
    {% if not article.published %} unpublished{% endif %}"> 
{% if not detail_view %} 

    <div class="post-preview"> 
     <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}"> 
      <h2 class="post-title"> 
      {% render_model article "title" "" "" "striptags" %} 
      </h2> 
      {% if article.lead_in %} 
      <h3 class="post-subtitle"> 
       {% if not detail_view %} 
        {% render_model article "lead_in" "" "" "truncatewords:'20'|striptags" %} 
       {% else %}  
        {% render_model article "lead_in" "" "" "striptags" %} 
       {% endif %} 
      </h3> 
      {% endif %} 
     </a> 
     <p class="post-meta" style="margin-bottom: 0;"> Posted by 
      {% include "aldryn_newsblog/includes/author.html" with author=article.author %} 
      on {{ article.publishing_date|date:"F d, Y" }} 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Categories:</h4> 
       {% for category in article.categories.all %} 
        <a href="/articles/category/{{category.name|lower}}">{{ category.name }} {% if not forloop.last %}, {% endif %}</a> 
       {% endfor %} 
     </p> 
     <p class="post-meta" style="margin: 0"> 
      <h4 style="display:inline-flex">Tags:</h4> 
       {% for tag in article.tag %} 
        <a href="/articles/category/{{tag.name|lower}}">{{ tag.name }} {% if not forloop.last %}, {% endif %}</a> 
       {% endfor %} 
     </p> 
    </div> 
    <hr> 
{% endif %} 

{% if detail_view %} 
<!-- <h3>Testing template! (from article with detail_view=True)</h3> --> 
     {% render_placeholder article.content language placeholder_language %}   
{% endif %} 

</article> 

이 템플릿의 출력은 다음과 같이 대략입니다 :

즉, 나는 다음과 같은 템플릿을 이미지가 나타납니다.

As you can see, the H4 tag and others are taken outside the <p> tag.

나는 무엇을 놓치고? 템플릿이 올바르지 않습니까? 아니면 내가 관찰하고있는 버그입니까? 나는 사파리와 파이어 폭스에서 이것을 시도했다. 결과는 같습니다. 이 답변 밖으로

답변

1

아니요, 이것은 잘못된 HTML을 이해하려고하는 브라우저 전용 도구입니다.

h 요소는 p 요소 안에 들어갈 수 없습니다.

1

확인 :

<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

그들은 더 많은 것이 있지만 기본적 <h1,2,3,4> 태그가 <p> 태그에 포함되는 깊이에 설명 브라우저에 의해 불법으로 간주되어 자동으로 태그를 닫는. 다른 태그를 사용하면 문제가 해결됩니다.

+0

많은 감사를드립니다. – MadPhysicist