Semantisch korrekte Trennzeichen in der Liste (direkt im HTML-Format, nicht CSS-generiert)

Question

Um this layout of a fully justified menu list zu erreichen, kann ich keine CSS-Pseudoklassen verwenden, um Trennzeichen zwischen Listenelementen anzuzeigen. Stattdessen muss ich das Trennzeichen direkt in den HTML-Code einfügen. Da according to HTML5 standard in einem <ul> nur <li> und skriptunterstützende Elemente erlaubt sind, habe ich den folgenden Code gemacht. Es ist HTML5 gültig, aber es scheint mir eigenartig. Irgendwelche Bedenken? Dies wird die gleiche Wirkung haben

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
li.home { 
 
    padding: 0; 
 
} 
 

 
li, 
 
script::after { 
 
    vertical-align: middle; 
 
    padding-top: 10px; 
 
} 
 

 
nav { 
 
    border-bottom: 1px solid black; 
 
    border-top: 1px solid black; 
 
    height: 40px; 
 
} 
 

 
script.separator { 
 
    display: block; 
 
} 
 

 
script.separator::after { 
 
    content: "*"; 
 
}

<nav id="main-menu"> 
 
    <ul> 
 
    <li class="home"> 
 
     <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a> 
 
    </li> 
 
    <script class="separator"></script> 
 
    <li class="second"><a href="#">Item 1</a></li> 
 
    <script class="separator"></script> 
 
    <li><a href="#">Item 2</a></li> 
 
    <script class="separator"></script> 
 
    <li><a href="#">One more Item</a></li> 
 
    <script class="separator"></script> 
 
    <li><a href="#">Another Item</a></li> 
 
    <script class="separator"></script> 
 
    <li class="last"><a href="#">Contact</a></li> 
 
    </ul> 
 
</nav>

Answer 1

Ersetzen Sie die <script> mit einem anderen <li> und einfach einen Stil, um es mit

ul li:nth-of-type(even) { 
    display: block; 
    content: "*"; 
    vertical-align: middle; 
    padding-top: 10px; 
} 

zuweisen, sondern sieht viel sauberere auf der Code-Ansicht.

<nav id="main-menu"> 
    <ul> 
    <li class="home"> 
     <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a> 
    </li> 
    <li></li> 
    <li class="second"><a href="#">Item 1</a></li> 
    <li></li> 
    <li><a href="#">Item 2</a></li> 
    <li></li> 
    <li><a href="#">One more Item</a></li> 
    <li></li> 
    <li><a href="#">Another Item</a></li> 
    <li></li> 
    <li class="last"><a href="#">Contact</a></li> 
    </ul> 
</nav> 

Sie müssen möglicherweise den tatsächlichen CSS in der Regel zwicken über Ihr Aussehen anpassen und fühlen, sondern als ein Konzept finde ich es so zierlich und reinlich alle <li> Elemente zu haben, und dann CSS verwenden, um auf intelligente Weise alle die wählen richtige. Dies reduziert auch die Anzahl der class=" ... " herumliegen.

Sie können auch möglicherweise weitere Regeln hinzufügen, so dass Sie zum Beispiel auf der letzten Art der seperator CSS nicht tun, so würde die endgültige li nie die seperator entweder:

ul li:nth-of-type(even), ul li :not(:last-of-type) { 
    display: block; 
    content: "*"; 
    vertical-align: middle; 
    padding-top: 10px; 
} 

Answer 2

Ich bin nicht Sicher, das ist das genaue Layout, nach dem Sie suchen, aber können Sie nicht display: table und einen Rahmen verwenden?

ul { 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 

 
display: table; 
 
width: 100%; 
 
    } 
 

 
    li { 
 
display: table-cell; 
 
text-align: center; 
 
    } 
 

 
    li:not(:last-child) { 
 
border-right: 1px solid #333; 
 
    }

<ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    <li>Menu 4</li> 
 
    <li>Menu 5</li> 
 
</ul>