Wie verwende ich {} in Emmet?

Question

heute war ich ein nav-Bar angelegt und ich würde {} in Emmet verwenden, habe ich verwendet:

<div class="container"> 
    <main> 
    <div class="header"> 
     <section class="top-area"> 
     <nav> 
      <ul> 
      <li><a href="">Home</a></li> 
      <li><a href="">Contact</a></li> 
      <li><a href="">About</a></li> 
      <li><a href="">Other</a></li> 
      </ul> 
     </nav> 
     </section> 
    </div> 
    </main> 
</div> 

Aber mein Emmet-Code:

div.container>main>div.header>section.top-area>nav>ul>li*4>a{Home, Contact, About, Other} 

Ich würde, dass es sich werden:

<div class="container"> 
     <main> 
     <div class="header"> 
      <section class="top-area"> 
      <nav> 
       <ul> 
       <li><a href="">Home, Contact, About, Other</a></li> 
       <li><a href="">Home, Contact, About, Other</a></li> 
       <li><a href="">Home, Contact, About, Other</a></li> 
       <li><a href="">Home, Contact, About, Other</a></li> 
       </ul> 
      </nav> 
      </section> 
     </div> 
     </main> 
    </div> 

Wie verwende ich eine Option wie meinen ersten Code?

Answer 1

zuerst die Textelemente der Liste, Zeile für Zeile schreiben:

Home 
Contact 
About 
Other 

dann alle Elemente auszuwählen, und Wrap mit Abkürzung - Strg + Umschalt + A (Adobe Brackets) oder Ctrl + Shift + G (erhabener Text);

schreiben schließlich den Code zu erweitern:

div.container>main>div.header>section.top-area>nav>ul>li*>a{$#} 

* - wiedergibt, um so viele Listenelemente wie die Linien in dem ausgewählten Text;

{$#} - Jede Zeile wird im Textinhalt des Elements platziert.

Mehr über diese Emmet Funktion → http://docs.emmet.io/actions/wrap-with-abbreviation/#wrapping-individual-lines

Answer 2

Sie haben separat die Anker in den Listeneinträgen zuweisen. Das wird funktionieren.

div.container>main>div.header>section.top-area>nav>ul>li>a[href=""]{Home} 
+li>a[href=""]{Contac}+li>a[href=""]{About}+li>a[href=""]{Other}