webdesignerwilliamma

  concept: float the name to left; float the anchor list to right. problem: after float the anchor list to right, the sequence changed into: contact-portfolio-home. 1. html: < h3 > William Ma </ h3 > < ul class = "footer-nav" > < li >< a href = "#" > home </ a ></ li > < li >< a href = "portfolio/index.html" > portfolio </ a ></ li > < li >< a href = "portfolio/articles/contact/contact.html" > contact </ a ></ li > </ ul > 2. float name to left h3 { display : block ; float : left ; } 3. float nav to right .footer-nav { float : right ; } 4. float list to left .footer-nav li { display : inline-block ; float : left ; }

  html: < div class = "container clearfix" > < h1 class = "name" > William Ma </ h1 > < ul class = "main-nav" > < li >< a href = "#" > home </ a ></ li > < li >< a href = "portfolio/index.html" > portfolio </ a ></ li > < li >< a href = "portfolio/articles/contact/contact.html" > contact </ a ></ li > </ ul > </ div > css: 1. set the main-nav li as inline-blocks .main-nav li { display : inline-block ; } 2. centre the list .main-nav { margin : 10px auto ; }