HTMLタグのネストの問題

Question

編集：これはパグの問題だと思ったが、そうではなかった。

は、ここで問題が.SUBメニューですコード

- var list = [1, 2, 3, 4, 5] 
.navbar.clearfix 
    a.logo(href="#") Logo 
    div.links 
    each i in list 
     a(href="#")= 'Link ' + i 
     .sub-menu 
      each i in list 
      a(href="#")= 'Link ' + i 

は要素ではありませんされ、そして「」.SUB・メニュー内の余分な空白があります。

pugで複数レベルの反復を作成することはできますか？ありがとう

Answer 1

いくつかの要素の内部に入れることができる要素にはいくつかの制限があります。 p要素内にdivを含めることはできません。

これは、マークアップが可能な限り意味を持つようにするためです。 PARAGRAPHの内部にDIV要素が必要なのは誰ですか？一般的な意味でも、pにdivという意味はありません。divはブロックレベルの要素であり、a要素は最初はブロック要素ではない要素のみを含むことができます。私は興味深いことに、アンカー要素にDIVの入れ子の1レベルを持たせることができ、それがうまくいくことを発見しましたが、それ以外は破損します。

アンカー要素の内部にspan要素を使用し、CSSを使用してブロックレベルの要素にすると、アンカー要素の内側にspanの完全な罰金が適用されます。

この文書では、要素がどれによく果たしているの理解に役立つかもしれない - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content

Answer 2

私はこれがpugの問題ではなく、ブラウザの動作であることを発見しました。予想通り、この

<a>11 
    <div>22 
    <a>33</a> 
    </div> 
</a> 

よう

コードが巣ではないでしょう。現時点では、タグaをdivに置き換え、CSSとのリンクをエミュレートします。それについてはまだ興味があります。

Answer 3

HTMLのネストインタラクティブな要素を禁止します。別のリンク内にリンクを置くことはできません。

<ul>     <!-- Top level menu --> 
    <li> 
     <a href="...">  Top level link </a> 
     <ul>   <!-- Sub menu --> 
      <li> 
       <a href="..."> Sub menu link </a> 
      </li> 
     </ul> 
    </li> 
</ul>