Inline-Blockelement wird beim Auffüllen auf die zweite Linie reduziert

Question

Wie der Titel angibt, wird das Inline-Block-Listenelement in die zweite Zeile verschoben. Wie würde ich sie alle zentriert und auf derselben Linie halten? Vielen Dank! Unten habe ich den vollständigen css-Code zusammen mit einem Bild gepostet.

CSS:

body { 
    margin: 0; 
} 

nav { 
    position: fixed; 
    background-color: #000000; 
    width: 100%; 
    margin: 0; 
} 

nav .container { 
    display: table; 
    margin: 0 auto; 
} 

nav .container ul { 
    margin: 0; 
} 

nav .container ul li { 
    list-style: none; 
    color: #FFFFFF; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

nav .container ul li:nth-child(1n+2) { 
    margin-left: 5%; 
} 

Image Here

Answer 1

Wenn etwas nicht klar, fühlen Sie sich frei, mich zu fragen.

Weiß nicht, aber die Unterstreichung stört mich sehr mit einem schwarzen Hintergrund. Wenn Sie es entfernen möchten, fügen Sie das zum css hinzu. (aber Sie wissen das wahrscheinlich)

a { 
    text-decoration: none; 
} 

Answer 2

Sie müssen einige CSS-Änderungen vornehmen, um es zu bekommen. Bitte versuchen Sie unter CSS, es funktioniert

body { 
    margin: 0; 
} 

nav { 
    position: fixed; 
    background-color: #000000; 
    width: 100%; 
} 


nav .container ul { 
    display: table; 
    width: 100%; 
} 

nav .container ul li { 
    list-style: none; 
    color: #FFFFFF; 
    display: table-cell; 
    text-align: center; 
} 

nav .container ul li:nth-child(1n+2) { 
    margin-left: 5%; 
}