Wie zentriere ich meine Navigationsleiste auf ihrer eigenen Linie?

Question

Fiddle: https://jsfiddle.net/sm6yvwmu/1/

Ich versuche, meine Navigationsleiste zu zentrieren; aber mein side-Element erscheint immer in der gleichen Zeile wie meine nav-Leiste. Wie kann ich das beheben?

Vielen Dank im Voraus!

#wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#nav { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    display: block; 
 
} 
 

 
#nav li { 
 
    float: left; 
 
} 
 

 
#nav a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 5px; 
 
} 
 

 
aside { 
 
    float: left; 
 
    padding: 5px; 
 
    height: 200px; 
 
    width: 100px; 
 
    display: block; 
 
}

<header>Portfolio</header> 
 

 
<ul id="nav"> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Writing</a></li> 
 
    <li><a href="#">Multimedia</a></li> 
 
    <li><a href="#">Resume</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<aside> 
 
    Michelle 
 
</aside>

Answer 1

Updated Fidle

#nav li{ 
    display: inline-block; 
} 

Use "inline-block" statt "float"

Answer 2

Weave:http://kodeweave.sourceforge.net/editor/#bed33b10b7298bfb9ba85eaf5ccb7ed3

Sie haben display block auf aside angewendet, so dass es automatisch in einer neuen Zeile angezeigt wird, es sei denn, Sie haben float. Also entferne den Float und du bist gut.

Sie können auch angeben, dass jede Liste inline oder inline-block angezeigt werden soll.

#wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#nav { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    display: block; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
#nav li { 
 
    display: inline-block; 
 
} 
 

 
#nav a { 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin: 5px; 
 
} 
 

 
aside { 
 
    height: 200px; 
 
    width: 100px; 
 
    display: block; 
 
}

<header>Portfolio</header> 
 

 
<ul id="nav"> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Writing</a></li> 
 
    <li><a href="#">Multimedia</a></li> 
 
    <li><a href="#">Resume</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<aside> 
 
    Michelle 
 
</aside>