2017-09-25 5 views
0

Djangoテンプレートの次の動作に少し戸惑って、出力のスタイリングがうまくできなくなってしまいます。Django 1.10テンプレートは、親以外のネストされたHTMLタグをレンダリングします

つまり、私は次のテンプレートがあります。

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

をこのテンプレートの出力は大体このようなものです:ソース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> 

、ブラウザは次のように扱いますイメージが示す。

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

私は何をしないのですか?テンプレートは間違っていますか?それとも、これは私が観察しているバグですか?私はSafariとFirefoxでこれを試しました。結果は同じです。

答えて

1

いいえ、それはあなたの無効なHTMLを理解しようとしているブラウザの開発ツールです。

h要素は、p要素内に入ることはできません。

1

この答えをチェックアウト:

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

彼らは<p>タグに埋め込まれているあなたの<h1,2,3,4>タグがブラウザによっては違法とみなされ、自動的にタグを閉じている基本的にそこに多くの深さでそれを説明したが。別のタグを使用すると、問題を解決するはずです。

+0

非常に感謝しています! – MadPhysicist

関連する問題