Zentrieren Sie die oberen Menükategorien über CSS

Question

Ich musste meine Menü-Kategorien zentrieren, so dass die Menü-Kategorie für eine Breite von 1200px sitzen sollte und es sollte gerade Lücken (dh Marge-rechts) zwischen den Kategorie-Elementen in der Menü und letzter Punkt sollte rechts mehr Ecke auf dem Bildschirm sitzen (zB Rand rechts: 0). Nachfolgend finden Sie den Beispielcode für dasselbe.

https://jsfiddle.net/es0o324t/1/ 

HTML:

<div class="navigationbarcollectioncomponent"> 
    <div id="nav_main"> 
     <ul> 
      <li class="La parent"> 
       <a href="">Clothing</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Denim</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Accessories</a> 
      <li class="La parent"> 
       <a href="">Online Exclusives</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Sale</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Hot offers</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS:

body { 
margin:0; 
padding:0; 
} 

ul{ 
margin-left:0; 
} 

ul,li{ 
list-style: none; 
padding:0; 
} 

.navigationbarcollectioncomponent { 
width: 1200px; 
margin: 0 auto; 
} 

#nav_main li.La{ 
float: left; 
} 

#nav_main li.La > a { 
color: #373737; 
display: inline-block; 
font-family: "Lato-Regular"; 
font-size: 16px; 
line-height: 36px; 
margin: 0; 
padding: 0px 8px; 
text-transform: uppercase; 
} 

ich dies über JavaScript erreicht hatte und durch die Breite von jedem der Kategorien im Menü zu lesen und dann die Lücke b Berechnung/w die Kategorien basierend auf der Anzahl der Kategorien.

Aber das Problem ist, ich muss dies nur über CSS ohne JavaScript tun. bcoz die Berechnung über JS nimmt etwas Zeit in Anspruch.

Auch die Anzahl der Kategorien ist dynamisch. Daher kann ich den Margin-Right-Wert für jede der Kategorien (d. H. Li-Tag) nicht fest codieren.

Bitte lassen Sie mich wissen, wenn es eine Lösung für das gleiche gibt.

PFA für den Snapshot des erwarteten Ergebnisses.

Erste Kategorie sollten die meisten in 1200px Breite ausgerichtet gelassen werden, und die letzte Kategorie sollte nach rechts, und die Kategorien ausgerichtet werden, die Mitte mit

mäßigem Abstand

Answer 1

Da Sie diese Frage mit CSS3 tagged, warum nicht flex verwenden?

Lassen Sie Ihren Container ul zur Anzeige flex mit justify-content festgelegt auf space-between.

ul { 
    width: 100%; padding: 8px; 
    display: flex; 
    justify-content: space-between; 
} 

Ihre Fiddle: https://jsfiddle.net/abhitalks/es0o324t/2/

Answer 2

Um Mitte ausgerichtet sein sollte, b/w erste und letzte Kategorien Sie Nav-Menü, fügen Sie bitte auch diese CSS.

#nav_main{ 
    margin: 0 auto; 
    display: table; 
} 

Answer 3

Kontrolle dieser Geige: jsfiddle.net/shiyaspathiyassery/6jqy6702/1/

Sie hinzugefügt haben float: left; Bitte entfernen Sie das.

Answer 4

Hier ist etwas nah genug. Führen Sie den Code-Schnipsel das Ergebnis zu sehen:

obwohl die äußeren linken und rechten Menü sind nicht auf die Seiten kleben bzw. da der <li> text-align zum Zentrum zu erreichen, um auch Raum zwischen den Menüs eingestellt.

body { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
ul{ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
    width: 100%; 
 
} 
 

 
ul,li{ 
 
list-style: none; 
 
padding:0; 
 
} 
 

 
.navigationbarcollectioncomponent { 
 
    display: inline-block; 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
#nav-main{ 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#nav_main li.La{ 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 

 
#nav_main li.La > a { 
 
color: #373737; 
 
display: inline-block; 
 
font-family: "Lato-Regular"; 
 
font-size: 16px; 
 
line-height: 36px; 
 
margin: 0; 
 
padding: 0px 8px; 
 
text-transform: uppercase; 
 
}

<div class="navigationbarcollectioncomponent"> 
 
    <div id="nav_main"> 
 
     <ul> 
 
      <li class="La parent"> 
 
       <a href="">Clothing</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Denim</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Accessories</a> 
 
      <li class="La parent"> 
 
       <a href="">Online Exclusives</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Sale</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Hot offers</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 5

table-layout: fixed kann verwendet werden, um zu erreichen, was Sie suchen.

In table-layout: fixed hängt das horizontale Layout nur von der Breite der Tabelle und der Breite der Spalten unabhängig vom Inhalt der Zellen ab. So Ihre Tabelle Breite wird gleichmäßig für jede Spalte geteilt.

hinzufügen/ändern diese CSS-Eigenschaften für ul und #nav_main li.La

ul{ 
    margin-left:0; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    text-align: center; 
} 

#nav_main li.La{ 
    display:table-cell; 
} 

https://jsfiddle.net/f03mqxd7/