HTML: Zentrieren unsortierten Liste mit unbekannter Anzahl von Elementen horizontal

Question

Ich arbeite auf einer Seite, wo ich eine unbekannte Anzahl von Elementen mit dem UL/li-HTML-Tag Liste. Was ich will ist folgende:

• Die Liste sollte so viel horizontal wie möglich
• Die Liste verwenden soll horizontal werden, auch wenn Zeilenumbrüche benötigt (keinen Platz auf der rechten Seite des meisten zentriert rechts positioniert li-Einträge)
• Die Breite der li-Elemente festgelegt ist
• Die li-Elemente-linksbündig

Aber ich lief in einige Probleme:

• Der Zeilenumbruch auf der Größe des Browser-abhängig ist, so kann ich nicht sagen, dass ich eine neue Zeile jedes n-te-li-Element
• einfügen werde Wenn ein Zeilenumbruch wird die Breite des ul benötigt, -elementigen (oder div-Element umgibt, es erhöht wird, so dass es nicht horizontal zentriert)

ich habe den folgenden Code ein, dass mein Problem zeigt: https://jsfiddle.net/07yfv9gr/3/

<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;"> 
    <ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;"> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li> 
    </ul> 
</div> 

Hinweis: die Breite festgelegt ist 500px zur Veranschaulichung rechnet nur auf jsfiddle. Es sollte 90% oder ähnlich sein.

Im obigen Beispiel werden Zeilenumbrüche automatisch nach den Elementen 3, 6, 9 und 12 eingefügt. Aber es vergrößert automatisch die Größe des umgebenden div, also habe ich einen leeren Platz neben Element 3, 6, Daher 9 und 12 ist es nicht möglich, die div horizontal zum Zentrum :(

Was ich will, ist so etwas wie dieses: https://jsfiddle.net/7L1su8zp/5/

<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;"> 
    <ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;"> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li> 
     <br /> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li> 
     <br /> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li> 
     <br /> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li> 
     <br /> 
     <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li> 
    </ul> 
</div> 

Aber wie ich bereits erwähnt, kann ich nicht Zeilenumbrüche einfügen nach jedem n-ten Element, weil ich je nach Breite des Browsers so viele Li-Elemente pro Zeile wie möglich anzeigen möchte

Ich hoffe, dass jemand eine gute Lösung für mich Problem kennt :)

Answer 1

„Die Breite der li-Elemente festgelegt ist“

Dann einfach CSS-Medienabfragen verwenden die mit dem Browser zu erkennen und zu Sehen Sie, wie viele Listenelemente passen.

Im Internet gibt es Statistiken zur Bildschirmauflösung. So sehen Sie die meisten verwendeten Breiten und lassen Sie Ihre Website gut aussehen auf denen wie: 1366, 1920, 1280, 1440, 1600, 1024, 1680, 1360