Probleme mit Navtab

Question

Ich lerne HTML und CSS vom Freecodecamp. Mit all dem Bootstrap-Code bin ich ein bisschen verwirrt.

Hier ist mein Code:

h1 { 
 
    text-align: center; 
 
    letter-spacing: 5px; 
 
    color: coral; 
 
    font-family: verdana; 
 
} 
 
ul {     
 
    height: 20%; 
 
    background-color: darkgrey; 
 
    list-style-type: none; 
 
    display: solid;            
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 0% 5% 0% 5%; 
 
    text-align:      
 
} 
 
#first { 
 
    margin: 0% 0% 0% 30%; 
 
} 
 
li:hover {   
 
    background-color: bisque; 
 
    text-decoration: none; 
 
}

<h1> Test Website </h1> 
 
<div class="container-fluid"> 
 
    <div class="menu"> 
 
    <div id="tope"></div> 
 
    <ul id="navbar">     
 
     <li id="first"><a href="www.a.com"> Us </a></li> 
 
     <li><a href="www.b.com"> Work </a></li> 
 
     <li id="last"><a href="www.c.com"> Vids and photos </a></li> 
 
    </ul>  
 
    </div> 
 
</div>

Demo: CodePen.

Das Problem, dass ich kämpfe ist, dass meine navtab (eigentlich alle <li> Elemente) nicht den Haupttitel <h1> Element folgen, wenn ich die Größe des Bildschirms.

Ich möchte eine Art Grid-System zu machen, wo meine <li> in Bezug auf die <h1> zentriert sind, aber ohne Bootstrap. Ist das möglich? Wenn das so ist, wie?

Answer 1

Der Grund Ihrer Liste ist nicht richtig auf Resize Ausrichtung ist, dass Sie einen margin-right Wert #first hinzugefügt haben. Das verschiebt alles aus der Ausrichtung. Aber Sie sind sehr nahe zum Erreichen Ihrer gewünschten Ergebnisse!

Sie müssen nur ein paar Korrekturen:

http://www.bootply.com/YHHS5on2Ej

ul {     
    background-color: darkgrey; 
    list-style-type: none; 
    width: 100%; 
    text-align: center; 
} 

li { 
    display: inline-block; 
    padding: 0% 5% 0% 5%; 
} 

Nehmen Sie #first aller CSS befreien und beachten Sie, dass display:solid nicht gültig CSS ist

Answer 2

Versuchen Sie so etwas für .menu, ul und li. Ich weiß nicht, ob das Ihren Bedürfnissen entspricht, aber mit diesem Code setzen Sie eine Breite für Ihre ul und dann margin: auto zentriert es und wird in der Kopfzeile gehalten.

 .menu { 
      background: darkgrey; 
     } 


     ul {     
      height: 20%; 
      list-style-type: none; 
      width: 300px; 
      margin: auto 
     } 

     li { 
      display: inline-block; 
      padding: 0% 5% 0% 5%; 

     }